Repository: sinan-aydogan/tailadmin-laravel
Branch: main
Commit: f8b2fd49d21e
Files: 536
Total size: 1.6 MB

Directory structure:
gitextract_rja1wsy7/

├── .deepsource.toml
├── .editorconfig
├── .gitattributes
├── .github/
│   ├── FUNDING.yml
│   ├── ISSUE_TEMPLATE/
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   └── copilot-instructions.md
├── .gitignore
├── .prettierrc.json
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── app/
│   ├── Actions/
│   │   ├── Fortify/
│   │   │   ├── CreateNewUser.php
│   │   │   ├── PasswordValidationRules.php
│   │   │   ├── ResetUserPassword.php
│   │   │   ├── UpdateUserPassword.php
│   │   │   └── UpdateUserProfileInformation.php
│   │   ├── Jetstream/
│   │   │   ├── AddTeamMember.php
│   │   │   ├── CreateTeam.php
│   │   │   ├── DeleteTeam.php
│   │   │   ├── DeleteUser.php
│   │   │   ├── InviteTeamMember.php
│   │   │   ├── RemoveTeamMember.php
│   │   │   └── UpdateTeamName.php
│   │   └── TailAdmin/
│   │       ├── UpdateDarkModePreference.php
│   │       └── UpdateUserLanguage.php
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── Controller.php
│   │   │   ├── DemoContentController.php
│   │   │   ├── PermissionGroupController.php
│   │   │   └── Settings/
│   │   │       ├── PermissionController.php
│   │   │       ├── RoleController.php
│   │   │       ├── SystemController.php
│   │   │       └── UserController.php
│   │   ├── Middleware/
│   │   │   ├── HandleInertiaRequests.php
│   │   │   └── LocalizationMiddleware.php
│   │   ├── Requests/
│   │   │   ├── StorePermissionGroupRequest.php
│   │   │   └── UpdatePermissionGroupRequest.php
│   │   └── Resources/
│   │       └── DemoContentResource.php
│   ├── Models/
│   │   ├── DemoContent.php
│   │   ├── Membership.php
│   │   ├── PermissionGroup.php
│   │   ├── Team.php
│   │   ├── TeamInvitation.php
│   │   └── User.php
│   ├── Policies/
│   │   ├── DemoContentPolicy.php
│   │   ├── PermissionGroupPolicy.php
│   │   └── TeamPolicy.php
│   └── Providers/
│       ├── AppServiceProvider.php
│       ├── FortifyServiceProvider.php
│       └── JetstreamServiceProvider.php
├── artisan
├── bootstrap/
│   ├── app.php
│   ├── cache/
│   │   └── .gitignore
│   └── providers.php
├── composer.json
├── config/
│   ├── app.php
│   ├── auth.php
│   ├── cache.php
│   ├── database.php
│   ├── debugbar.php
│   ├── filesystems.php
│   ├── fortify.php
│   ├── jetstream.php
│   ├── localization.php
│   ├── logging.php
│   ├── mail.php
│   ├── permission.php
│   ├── queue.php
│   ├── sanctum.php
│   ├── services.php
│   └── session.php
├── database/
│   ├── .gitignore
│   ├── factories/
│   │   ├── DemoContentFactory.php
│   │   ├── PermissionGroupFactory.php
│   │   ├── TeamFactory.php
│   │   └── UserFactory.php
│   ├── migrations/
│   │   ├── 0001_01_01_000000_create_users_table.php
│   │   ├── 0001_01_01_000001_create_cache_table.php
│   │   ├── 0001_01_01_000002_create_jobs_table.php
│   │   ├── 2021_07_16_121843_create_permission_tables.php
│   │   ├── 2021_11_10_062603_create_demo_contents_table.php
│   │   ├── 2022_01_20_204151_add_group_columns_to_permissions_table.php
│   │   ├── 2022_01_20_204743_create_permission_groups_table.php
│   │   ├── 2024_07_03_194214_add_two_factor_columns_to_users_table.php
│   │   ├── 2024_07_03_194232_create_personal_access_tokens_table.php
│   │   ├── 2024_07_03_194233_create_teams_table.php
│   │   ├── 2024_07_03_194234_create_team_user_table.php
│   │   ├── 2024_07_03_194235_create_team_invitations_table.php
│   │   └── 2024_07_07_190651_add_personalization_fields_to_users_table.php
│   └── seeders/
│       ├── DatabaseSeeder.php
│       ├── PermissionGroupSeeder.php
│       ├── PermissionSeeder.php
│       ├── RoleSeeder.php
│       └── UserSeeder.php
├── eslint.config.js
├── jsconfig.json
├── package.json
├── phpunit.xml
├── postcss.config.js
├── public/
│   ├── .htaccess
│   ├── index.php
│   └── robots.txt
├── resources/
│   ├── css/
│   │   ├── app.css
│   │   ├── components/
│   │   │   ├── alert.css
│   │   │   ├── auth.css
│   │   │   ├── avatar.css
│   │   │   ├── backEndTablePagination.css
│   │   │   ├── badge.css
│   │   │   ├── breadcrumb.css
│   │   │   ├── button.css
│   │   │   ├── collapsible.css
│   │   │   ├── content-box.css
│   │   │   ├── dropdown.css
│   │   │   ├── grid.css
│   │   │   ├── input.css
│   │   │   ├── list.css
│   │   │   ├── loading.css
│   │   │   ├── modal.css
│   │   │   ├── pagination.css
│   │   │   ├── progress.css
│   │   │   ├── radius.css
│   │   │   ├── statistic-box.css
│   │   │   ├── tab.css
│   │   │   ├── table.css
│   │   │   ├── toastr.css
│   │   │   ├── tooltip.css
│   │   │   └── vertical-menu.css
│   │   ├── layout/
│   │   │   ├── footer.css
│   │   │   ├── full-screen-layout.css
│   │   │   ├── main-menu.css
│   │   │   ├── main.css
│   │   │   ├── top-bar.css
│   │   │   └── top-menu.css
│   │   └── misc/
│   │       ├── effect.css
│   │       └── highlighter.css
│   ├── js/
│   │   ├── Components/
│   │   │   ├── Alert/
│   │   │   │   └── TAlert.vue
│   │   │   ├── Auth/
│   │   │   │   ├── TForgot.vue
│   │   │   │   ├── TLock.vue
│   │   │   │   ├── TLogin.vue
│   │   │   │   └── TRegister.vue
│   │   │   ├── Avatar/
│   │   │   │   ├── TAvatar.vue
│   │   │   │   └── TAvatarGroup.vue
│   │   │   ├── Badge/
│   │   │   │   └── TBadge.vue
│   │   │   ├── Breadcrumb/
│   │   │   │   └── TBreadcrumb.vue
│   │   │   ├── Button/
│   │   │   │   └── TButton.vue
│   │   │   ├── Card/
│   │   │   │   ├── TContentCard.vue
│   │   │   │   └── TStatisticWidget.vue
│   │   │   ├── Chart/
│   │   │   │   ├── TBarChart.vue
│   │   │   │   ├── TDoughnutChart.vue
│   │   │   │   ├── TLineChart.vue
│   │   │   │   ├── TPieChart.vue
│   │   │   │   ├── TPolarChart.vue
│   │   │   │   └── TRadarChart.vue
│   │   │   ├── Code/
│   │   │   │   └── TCodeShowcase.vue
│   │   │   ├── Collapsible/
│   │   │   │   ├── TCollapsible.vue
│   │   │   │   └── TCollapsibleItem.vue
│   │   │   ├── Dropdown/
│   │   │   │   ├── TDropdown.vue
│   │   │   │   └── TDropdownItem.vue
│   │   │   ├── Form/
│   │   │   │   ├── Inputs/
│   │   │   │   │   ├── TInputBetween.vue
│   │   │   │   │   ├── TInputCheckBox.vue
│   │   │   │   │   ├── TInputDate.vue
│   │   │   │   │   ├── TInputFile.vue
│   │   │   │   │   ├── TInputInlineEditableRepeatable.vue
│   │   │   │   │   ├── TInputMultiSelect.vue
│   │   │   │   │   ├── TInputRadioButton.vue
│   │   │   │   │   ├── TInputRepeatable.vue
│   │   │   │   │   ├── TInputSelect.vue
│   │   │   │   │   ├── TInputText.vue
│   │   │   │   │   └── TInputTextArea.vue
│   │   │   │   ├── TError.vue
│   │   │   │   ├── TFormContent.vue
│   │   │   │   ├── TFormSection.vue
│   │   │   │   └── TInputGroup.vue
│   │   │   ├── Icon/
│   │   │   │   ├── TAdjustmentsIcon.vue
│   │   │   │   ├── TAudioIcon.vue
│   │   │   │   ├── TBanIcon.vue
│   │   │   │   ├── TBellIcon.vue
│   │   │   │   ├── TCalendarIcon.vue
│   │   │   │   ├── TCashIcon.vue
│   │   │   │   ├── TCheckCircleIcon.vue
│   │   │   │   ├── TCheckCircleSolidIcon.vue
│   │   │   │   ├── TCheckIcon.vue
│   │   │   │   ├── TChevronDoubleDownIcon.vue
│   │   │   │   ├── TChevronDownIcon.vue
│   │   │   │   ├── TChevronLeftIcon.vue
│   │   │   │   ├── TChevronRightIcon.vue
│   │   │   │   ├── TChevronUpIcon.vue
│   │   │   │   ├── TClockIcon.vue
│   │   │   │   ├── TCogIcon.vue
│   │   │   │   ├── TCollectionIcon.vue
│   │   │   │   ├── TDocumentIcon.vue
│   │   │   │   ├── TDotsVerticalIcon.vue
│   │   │   │   ├── TEyeIcon.vue
│   │   │   │   ├── TGitHubIcon.vue
│   │   │   │   ├── THamburgerMenuTriggerIcon.vue
│   │   │   │   ├── TInformationCircleIcon.vue
│   │   │   │   ├── TInformationIcon.vue
│   │   │   │   ├── TLogOutIcon.vue
│   │   │   │   ├── TLogo.vue
│   │   │   │   ├── TPaperClipIcon.vue
│   │   │   │   ├── TPencilAltIcon.vue
│   │   │   │   ├── TPlusCircleIcon.vue
│   │   │   │   ├── TPlusIcon.vue
│   │   │   │   ├── TRefreshIcon.vue
│   │   │   │   ├── TSearchCircleIcon.vue
│   │   │   │   ├── TSearchIcon.vue
│   │   │   │   ├── TShieldCheckIcon.vue
│   │   │   │   ├── TShieldCheckSolidIcon.vue
│   │   │   │   ├── TShoppingBagIcon.vue
│   │   │   │   ├── TStarIcon.vue
│   │   │   │   ├── TStarSolidIcon.vue
│   │   │   │   ├── TTrashIcon.vue
│   │   │   │   ├── TUserCircleIcon.vue
│   │   │   │   ├── TUserGroupIcon.vue
│   │   │   │   ├── TVideoIcon.vue
│   │   │   │   ├── TXCircleIcon.vue
│   │   │   │   └── TXIcon.vue
│   │   │   ├── List/
│   │   │   │   ├── TList.vue
│   │   │   │   └── TListItem.vue
│   │   │   ├── Loading/
│   │   │   │   ├── Animations/
│   │   │   │   │   ├── TLoadingAnimationCogs.vue
│   │   │   │   │   ├── TLoadingAnimationThreeBars.vue
│   │   │   │   │   └── TLoadingAnimationThreeDots.vue
│   │   │   │   └── TLoading.vue
│   │   │   ├── Misc/
│   │   │   │   ├── TComponentRadiusSelector.vue
│   │   │   │   ├── TComponentStyleSelector.vue
│   │   │   │   └── TComponentWidthSelector.vue
│   │   │   ├── Modal/
│   │   │   │   └── TModal.vue
│   │   │   ├── Paginate/
│   │   │   │   ├── TBackEndTablePaginate.vue
│   │   │   │   └── TPaginate.vue
│   │   │   ├── Progress/
│   │   │   │   └── TProgress.vue
│   │   │   ├── Tab/
│   │   │   │   └── TTab.vue
│   │   │   ├── Table/
│   │   │   │   ├── TBackEndTable.vue
│   │   │   │   ├── TTable.vue
│   │   │   │   └── TTableActionDropdown.vue
│   │   │   ├── Toastr/
│   │   │   │   └── TToastr.vue
│   │   │   └── Tooltip/
│   │   │       └── TTooltip.vue
│   │   ├── Functions/
│   │   │   ├── deviceInfoCollector.js
│   │   │   ├── menuTrigger.js
│   │   │   └── windowSizeCalculator.js
│   │   ├── Jetstream/
│   │   │   ├── ActionMessage.vue
│   │   │   ├── ActionSection.vue
│   │   │   ├── ApplicationLogo.vue
│   │   │   ├── ApplicationMark.vue
│   │   │   ├── AuthenticationCard.vue
│   │   │   ├── AuthenticationCardLogo.vue
│   │   │   ├── Banner.vue
│   │   │   ├── Checkbox.vue
│   │   │   ├── ConfirmationModal.vue
│   │   │   ├── ConfirmsPassword.vue
│   │   │   ├── DangerButton.vue
│   │   │   ├── DialogModal.vue
│   │   │   ├── Dropdown.vue
│   │   │   ├── DropdownLink.vue
│   │   │   ├── FormSection.vue
│   │   │   ├── InputError.vue
│   │   │   ├── InputLabel.vue
│   │   │   ├── Modal.vue
│   │   │   ├── NavLink.vue
│   │   │   ├── PrimaryButton.vue
│   │   │   ├── ResponsiveNavLink.vue
│   │   │   ├── SecondaryButton.vue
│   │   │   ├── SectionBorder.vue
│   │   │   ├── SectionTitle.vue
│   │   │   ├── TextInput.vue
│   │   │   └── Welcome.vue
│   │   ├── Lang/
│   │   │   ├── Flags/
│   │   │   │   ├── flagBg.vue
│   │   │   │   ├── flagDe.vue
│   │   │   │   ├── flagEn.vue
│   │   │   │   ├── flagFr.vue
│   │   │   │   ├── flagRu.vue
│   │   │   │   ├── flagTr.vue
│   │   │   │   └── flagZh.vue
│   │   │   ├── bg/
│   │   │   │   ├── auth_lang_bg.js
│   │   │   │   ├── general_lang_bg.js
│   │   │   │   ├── main_menu_lang_bg.js
│   │   │   │   ├── notification_lang_bg.js
│   │   │   │   └── user_menu_lang_bg.js
│   │   │   ├── de/
│   │   │   │   ├── auth_lang_de.js
│   │   │   │   ├── general_lang_de.js
│   │   │   │   ├── main_menu_lang_de.js
│   │   │   │   ├── notification_lang_de.js
│   │   │   │   └── user_menu_lang_de.js
│   │   │   ├── en/
│   │   │   │   ├── auth_lang_en.js
│   │   │   │   ├── general_lang_en.js
│   │   │   │   ├── main_menu_lang_en.js
│   │   │   │   ├── notification_lang_en.js
│   │   │   │   ├── pagination_lang.js
│   │   │   │   ├── table_lang.js
│   │   │   │   └── user_menu_lang_en.js
│   │   │   ├── fr/
│   │   │   │   ├── auth_lang_fr.js
│   │   │   │   ├── general_lang_fr.js
│   │   │   │   ├── main_menu_lang_fr.js
│   │   │   │   ├── notification_lang_fr.js
│   │   │   │   └── user_menu_lang_fr.js
│   │   │   ├── languages.js
│   │   │   ├── ru/
│   │   │   │   ├── auth_lang_ru.js
│   │   │   │   ├── general_lang_ru.js
│   │   │   │   ├── main_menu_lang_ru.js
│   │   │   │   ├── notification_lang_ru.js
│   │   │   │   └── user_menu_lang_ru.js
│   │   │   ├── tr/
│   │   │   │   ├── auth_lang_tr.js
│   │   │   │   ├── general_lang_tr.js
│   │   │   │   ├── main_menu_lang_tr.js
│   │   │   │   ├── notification_lang_tr.js
│   │   │   │   ├── pagination_lang.js
│   │   │   │   ├── table_lang.js
│   │   │   │   └── user_menu_lang_tr.js
│   │   │   └── zh/
│   │   │       ├── auth_lang_zh.js
│   │   │       ├── general_lang_zh.js
│   │   │       ├── main_menu_lang_zh.js
│   │   │       ├── notification_lang_zh.js
│   │   │       └── user_menu_lang_zh.js
│   │   ├── Layouts/
│   │   │   ├── AppLayout-new.vue
│   │   │   ├── AppLayout.vue
│   │   │   ├── FullScreenLayout.vue
│   │   │   ├── GridSection.vue
│   │   │   ├── InitialVerticalMenu.vue
│   │   │   ├── LockScreen.vue
│   │   │   ├── MainMenu/
│   │   │   │   ├── Abay/
│   │   │   │   │   ├── MainMenu.vue
│   │   │   │   │   └── UserMenu.vue
│   │   │   │   └── Umay/
│   │   │   │       ├── MainMenu.vue
│   │   │   │       └── MainMenuItem.vue
│   │   │   ├── MainMenu.vue
│   │   │   └── TopMenu/
│   │   │       ├── TopMenu.vue
│   │   │       ├── TopMenuLanguageSelector.vue
│   │   │       ├── TopMenuNotification.vue
│   │   │       ├── TopMenuThemeSelector.vue
│   │   │       └── TopMenuUserMenu.vue
│   │   ├── Mixins/
│   │   │   ├── Styles/
│   │   │   │   ├── bgColorStyles.js
│   │   │   │   ├── contentCardStyleMixin.js
│   │   │   │   ├── forgotPasswordStyleMixin.js
│   │   │   │   ├── fullScreenCardStyleMixin.js
│   │   │   │   ├── gridStyleMixin.js
│   │   │   │   ├── inputGroupStyleMixin.js
│   │   │   │   ├── listStyleMixin.js
│   │   │   │   ├── lockStyleMixin.js
│   │   │   │   ├── loginStyleMixin.js
│   │   │   │   ├── modalStyleMixin.js
│   │   │   │   ├── paginateStyleMixin.js
│   │   │   │   ├── registerStyleMixin.js
│   │   │   │   ├── statisticWidgetStyleMixin.js
│   │   │   │   ├── tabStyleMixin.js
│   │   │   │   ├── toastrStyleMixin.js
│   │   │   │   └── tooltipStyleMixin.js
│   │   │   ├── radiusSizeMixin.js
│   │   │   └── settingsMenuMixin.js
│   │   ├── Pages/
│   │   │   ├── API/
│   │   │   │   ├── Index.vue
│   │   │   │   └── Partials/
│   │   │   │       └── ApiTokenManager.vue
│   │   │   ├── Auth/
│   │   │   │   ├── ConfirmPassword.vue
│   │   │   │   ├── ForgotPassword.vue
│   │   │   │   ├── Lock.vue
│   │   │   │   ├── Login.vue
│   │   │   │   ├── Policy.vue
│   │   │   │   ├── Register.vue
│   │   │   │   ├── ResetPassword.vue
│   │   │   │   ├── Terms.vue
│   │   │   │   ├── TwoFactorChallenge.vue
│   │   │   │   └── VerifyEmail.vue
│   │   │   ├── Dashboard.vue
│   │   │   ├── PrivacyPolicy.vue
│   │   │   ├── Profile/
│   │   │   │   ├── Partials/
│   │   │   │   │   ├── DarkModePreferenceForm.vue
│   │   │   │   │   ├── DeleteUserForm.vue
│   │   │   │   │   ├── LogoutOtherBrowserSessionsForm.vue
│   │   │   │   │   ├── PreferredLanguageForm.vue
│   │   │   │   │   ├── TwoFactorAuthenticationForm.vue
│   │   │   │   │   ├── UpdatePasswordForm.vue
│   │   │   │   │   └── UpdateProfileInformationForm.vue
│   │   │   │   └── Show.vue
│   │   │   ├── Samples/
│   │   │   │   ├── Components/
│   │   │   │   │   ├── Alert.vue
│   │   │   │   │   ├── Avatar.vue
│   │   │   │   │   ├── BackEndTable.vue
│   │   │   │   │   ├── Badge.vue
│   │   │   │   │   ├── Breadcrumb.vue
│   │   │   │   │   ├── Button.vue
│   │   │   │   │   ├── Chart.vue
│   │   │   │   │   ├── Collapsible.vue
│   │   │   │   │   ├── ContentBox.vue
│   │   │   │   │   ├── Dropdown.vue
│   │   │   │   │   ├── List.vue
│   │   │   │   │   ├── Loading.vue
│   │   │   │   │   ├── Modal.vue
│   │   │   │   │   ├── Paginate.vue
│   │   │   │   │   ├── Progress.vue
│   │   │   │   │   ├── Tab.vue
│   │   │   │   │   ├── Table.vue
│   │   │   │   │   ├── Toastr.vue
│   │   │   │   │   └── Tooltip.vue
│   │   │   │   ├── Examples/
│   │   │   │   │   ├── Auth/
│   │   │   │   │   │   ├── ForgotPassword.vue
│   │   │   │   │   │   ├── Lock.vue
│   │   │   │   │   │   ├── Login.vue
│   │   │   │   │   │   └── Register.vue
│   │   │   │   │   ├── ChatApp.vue
│   │   │   │   │   ├── EmailApp.vue
│   │   │   │   │   ├── ForgotPassword.vue
│   │   │   │   │   ├── Lock.vue
│   │   │   │   │   ├── Login.vue
│   │   │   │   │   ├── Pricing.vue
│   │   │   │   │   ├── Profile.vue
│   │   │   │   │   ├── ProjectApp.vue
│   │   │   │   │   ├── Register.vue
│   │   │   │   │   └── TodoApp.vue
│   │   │   │   ├── FormElements/
│   │   │   │   │   ├── DateField.vue
│   │   │   │   │   ├── FormStructure.vue
│   │   │   │   │   ├── InlineRepeatableField.vue
│   │   │   │   │   ├── InputGroup.vue
│   │   │   │   │   ├── MultiSelectInput.vue
│   │   │   │   │   ├── RepeatableField.vue
│   │   │   │   │   ├── SelectInput.vue
│   │   │   │   │   ├── SimpleField.vue
│   │   │   │   │   ├── TagInput.vue
│   │   │   │   │   └── Validation.vue
│   │   │   │   ├── Layouts/
│   │   │   │   │   ├── Grid.vue
│   │   │   │   │   ├── LayoutStructure.vue
│   │   │   │   │   └── StatisticWidget.vue
│   │   │   │   └── Test.vue
│   │   │   ├── Settings/
│   │   │   │   ├── Index.vue
│   │   │   │   ├── Permission/
│   │   │   │   │   └── Index.vue
│   │   │   │   ├── Role/
│   │   │   │   │   └── Index.vue
│   │   │   │   ├── System.vue
│   │   │   │   └── User.vue
│   │   │   ├── Teams/
│   │   │   │   ├── Create.vue
│   │   │   │   ├── Partials/
│   │   │   │   │   ├── CreateTeamForm.vue
│   │   │   │   │   ├── DeleteTeamForm.vue
│   │   │   │   │   ├── TeamMemberManager.vue
│   │   │   │   │   └── UpdateTeamNameForm.vue
│   │   │   │   └── Show.vue
│   │   │   ├── TermsOfService.vue
│   │   │   └── Welcome.vue
│   │   ├── Sources/
│   │   │   ├── authScreenDesigns.js
│   │   │   ├── icons.js
│   │   │   └── mainMenuLinks.js
│   │   ├── Stores/
│   │   │   ├── darkMode.js
│   │   │   ├── displayLanguage.js
│   │   │   ├── exampleStore.js
│   │   │   └── index.js
│   │   ├── app.js
│   │   ├── bootstrap.js
│   │   ├── config.js
│   │   ├── language.js
│   │   └── ssr.js
│   ├── lang/
│   │   ├── bg/
│   │   │   ├── actions.php
│   │   │   ├── auth.php
│   │   │   ├── http-statuses.php
│   │   │   ├── pagination.php
│   │   │   ├── passwords.php
│   │   │   └── validation.php
│   │   ├── bg.json
│   │   ├── de/
│   │   │   ├── actions.php
│   │   │   ├── auth.php
│   │   │   ├── http-statuses.php
│   │   │   ├── pagination.php
│   │   │   ├── passwords.php
│   │   │   └── validation.php
│   │   ├── de.json
│   │   ├── en/
│   │   │   ├── actions.php
│   │   │   ├── auth.php
│   │   │   ├── http-statuses.php
│   │   │   ├── pagination.php
│   │   │   ├── passwords.php
│   │   │   └── validation.php
│   │   ├── en.json
│   │   ├── fr/
│   │   │   ├── actions.php
│   │   │   ├── auth.php
│   │   │   ├── http-statuses.php
│   │   │   ├── pagination.php
│   │   │   ├── passwords.php
│   │   │   └── validation.php
│   │   ├── fr.json
│   │   ├── ru/
│   │   │   ├── actions.php
│   │   │   ├── auth.php
│   │   │   ├── http-statuses.php
│   │   │   ├── pagination.php
│   │   │   ├── passwords.php
│   │   │   └── validation.php
│   │   ├── ru.json
│   │   ├── tr/
│   │   │   ├── actions.php
│   │   │   ├── auth.php
│   │   │   ├── http-statuses.php
│   │   │   ├── pagination.php
│   │   │   ├── passwords.php
│   │   │   └── validation.php
│   │   ├── tr.json
│   │   ├── zh_CN/
│   │   │   ├── actions.php
│   │   │   ├── auth.php
│   │   │   ├── http-statuses.php
│   │   │   ├── pagination.php
│   │   │   ├── passwords.php
│   │   │   └── validation.php
│   │   └── zh_CN.json
│   ├── markdown/
│   │   ├── policy.md
│   │   └── terms.md
│   ├── sass/
│   │   └── app.scss
│   └── views/
│       ├── app.blade.php
│       └── emails/
│           └── team-invitation.blade.php
├── routes/
│   ├── api.php
│   ├── console.php
│   ├── web.php
│   └── web_modules/
│       ├── auth/
│       │   └── index.php
│       ├── index.php
│       └── user/
│           ├── index.php
│           └── preferences_routes.php
├── storage/
│   ├── app/
│   │   └── .gitignore
│   ├── debugbar/
│   │   └── .gitignore
│   ├── framework/
│   │   ├── .gitignore
│   │   ├── cache/
│   │   │   └── .gitignore
│   │   ├── data/
│   │   │   └── .gitignore
│   │   ├── sessions/
│   │   │   └── .gitignore
│   │   ├── testing/
│   │   │   └── .gitignore
│   │   └── views/
│   │       └── .gitignore
│   └── logs/
│       └── .gitignore
├── tailwind.config.js
├── tests/
│   ├── Feature/
│   │   ├── ApiTokenPermissionsTest.php
│   │   ├── AuthenticationTest.php
│   │   ├── BrowserSessionsTest.php
│   │   ├── CreateApiTokenTest.php
│   │   ├── CreateTeamTest.php
│   │   ├── DeleteAccountTest.php
│   │   ├── DeleteApiTokenTest.php
│   │   ├── DeleteTeamTest.php
│   │   ├── EmailVerificationTest.php
│   │   ├── ExampleTest.php
│   │   ├── InviteTeamMemberTest.php
│   │   ├── LeaveTeamTest.php
│   │   ├── PasswordConfirmationTest.php
│   │   ├── PasswordResetTest.php
│   │   ├── ProfileInformationTest.php
│   │   ├── RegistrationTest.php
│   │   ├── RemoveTeamMemberTest.php
│   │   ├── TwoFactorAuthenticationSettingsTest.php
│   │   ├── UpdatePasswordTest.php
│   │   ├── UpdateTeamMemberRoleTest.php
│   │   └── UpdateTeamNameTest.php
│   ├── Pest.php
│   ├── TestCase.php
│   └── Unit/
│       └── ExampleTest.php
└── vite.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .deepsource.toml
================================================
version = 1

[[analyzers]]
name = "php"

[[analyzers]]
name = "javascript"

  [analyzers.meta]
  plugins = ["vue"]

================================================
FILE: .editorconfig
================================================
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.{yml,yaml}]
indent_size = 2

[docker-compose.yml]
indent_size = 4


================================================
FILE: .gitattributes
================================================
* text=auto eol=lf

*.blade.php diff=html
*.css diff=css
*.html diff=html
*.md diff=markdown
*.php diff=php

/.github export-ignore
CHANGELOG.md export-ignore
.styleci.yml export-ignore


================================================
FILE: .github/FUNDING.yml
================================================
github: [sinan-aydogan]
open_collective: sinanaydogan
ko_fi: sinanaydogan


================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: ''
assignees: ''

---

**Describe the bug**
A clear and concise description of what the bug is.

**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

**Expected behavior**
A clear and concise description of what you expected to happen.

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Desktop (please complete the following information):**
 - OS: [e.g. iOS]
 - Browser [e.g. chrome, safari]
 - Version [e.g. 22]

**Smartphone (please complete the following information):**
 - Device: [e.g. iPhone6]
 - OS: [e.g. iOS8.1]
 - Browser [e.g. stock browser, safari]
 - Version [e.g. 22]

**Additional context**
Add any other context about the problem here.


================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: ''
assignees: ''

---

**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

**Describe the solution you'd like**
A clear and concise description of what you want to happen.

**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.

**Additional context**
Add any other context or screenshots about the feature request here.


================================================
FILE: .github/copilot-instructions.md
================================================
# TailAdmin Laravel - AI Coding Assistant Instructions

## Project Overview
TailAdmin is a Laravel 12 + Vue.js 3 admin dashboard built with Inertia.js, TailwindCSS 3, and Laravel Jetstream. It's a comprehensive UI starter kit with multi-language support, role-based permissions, and extensive custom components.

## Architecture & Key Technologies

### Core Stack
- **Backend**: Laravel 12 with Inertia.js SSR
- **Frontend**: Vue.js 3 with Composition API + Vite build system
- **Styling**: TailwindCSS 3 with custom dark mode implementation
- **Authentication**: Laravel Jetstream + Sanctum
- **Permissions**: Spatie Laravel Permission package
- **State Management**: Pinia stores for dark mode, language, etc.
- **Icons**: FontAwesome via `@fortawesome/vue-fontawesome`

### Project Structure Patterns
- **Routes**: Modular routing via `routes/web_modules/` - add new route modules here
- **Controllers**: Follow resource controller pattern, use `Inertia::render()` for page responses
- **Vue Components**: Located in `resources/js/Components/` organized by type (Form/, Table/, etc.)
- **Pages**: Inertia pages in `resources/js/Pages/` with consistent layout wrapping
- **Custom Actions**: TailAdmin-specific actions in `app/Actions/TailAdmin/`

## Development Workflows

### Setup Commands
```bash
composer install && npm install
cp .env.example .env
php artisan migrate --seed
php artisan storage:link && php artisan key:generate
```

### Development
```bash
npm run dev          # Start Vite dev server with HMR
php artisan serve    # Start Laravel server
```

### Production Build
```bash
npm run build        # Builds both client and SSR bundles
```

## Key Conventions & Patterns

### Vue Component Architecture
- All components use Composition API with `<script setup>`
- Custom component prefix: `t-` (e.g., `<t-button>`, `<t-input>`)
- Layout components in `resources/js/Layouts/` (AppLayout.vue is main)
- Font Awesome icons registered globally as `<icon>` component

### Backend Patterns
- **Table Search**: Custom `tableSearch()` eloquent macro for frontend table filtering
- **Permissions**: Super Admin bypass implemented in `AppServiceProvider::boot()`
- **Inertia Responses**: Always return with `Inertia::render('PageName', $data)`
- **Resources**: Use API Resources for consistent data transformation

### State Management
- **Dark Mode**: Managed via Pinia store in `resources/js/Stores/darkMode.js`
- **Language**: i18n with vue-i18n, stores in `resources/js/Stores/displayLanguage.js`
- **User Preferences**: Stored in database (`users.language`, `users.dark_mode`, `users.theme`)

### Multi-language Implementation
- **Frontend**: Vue i18n with language files in `resources/js/Lang/`
- **Backend**: Laravel localization in `resources/lang/`
- **Language Switching**: Route `/lang/{locale}` updates session locale

### Component Library Structure
- **Form Components**: Complex form elements with validation integration
- **Table Components**: Frontend and backend table implementations with search/filter
- **UI Components**: Alert, Badge, Button, Modal, etc. with consistent theming
- **Custom Inputs**: Repeatable fields, date pickers, multi-select with rich features

## Integration Points

### Inertia.js Patterns
- Page props passed via controller methods to Vue components
- Shared data configured in `HandleInertiaRequests` middleware
- Progress bar styling configured in `app.js`
- SSR support configured with separate `ssr.js` entry point

### TailwindCSS Customization
- Dark mode: `selector` strategy with manual class toggling
- Custom scrollbar plugin via `tailwind-scrollbar`
- Component-specific utilities in theme extension
- CSS purging configured for Vue SFC templates

### Database Architecture
- **User Personalization**: Language, dark_mode, theme columns in users table
- **Demo Content**: Sample data model for table component demonstrations
- **Permission Groups**: Custom grouping for Spatie permissions
- **Team Management**: Laravel Jetstream team functionality enabled

## Common Tasks

### Adding New Pages
1. Create controller with `Inertia::render()` response
2. Add Vue page component in `resources/js/Pages/`
3. Register route in appropriate `routes/web_modules/` file
4. Use `<app-layout>` wrapper with title and breadcrumbs

### Creating Components
1. Add to appropriate `resources/js/Components/` subdirectory
2. Use `t-` prefix for custom components
3. Include prop validation and emits declaration
4. Follow existing styling patterns with TailwindCSS

### Extending Permissions
1. Add permissions via database seeder or manual creation
2. Group permissions using `PermissionGroup` model
3. Use `@can` directive in Blade or `$page.props.auth.user.permissions` in Vue
4. Remember Super Admin has automatic access to everything

### Styling Guidelines
- Use TailwindCSS utility classes primarily
- Dark mode variants: `dark:` prefix (managed by Pinia store)
- Custom CSS only when Tailwind utilities insufficient
- Component theming via prop-based color/style variants

This codebase emphasizes rapid development with pre-built components, comprehensive theming, and developer-friendly patterns for admin dashboard creation.


================================================
FILE: .gitignore
================================================
# Laravel default
*.log
.DS_Store
.env
.env.backup
.env.production
.phpactor.json
.phpunit.result.cache
/.phpunit.cache
/auth.json
/bootstrap/ssr
/node_modules
/public/build
/public/hot
/public/storage
/storage/*.key
/storage/pail
/vendor
Homestead.json
Homestead.yaml
Thumbs.db
.workspace
npm-debug.log
yarn-error.log

# Editor directories and files
.code-workspace
/.c9
/.cursor
/.fleet
/.jetbrains
/.idea
/.nova
/.vscode
/.vscode-ai
/.zed
/copilot.log
/copilot-error.log
/ai-cache
/ai-temp

# Laravel Sail
docker-compose.yml
docker-compose.dev.yml
docker-compose.override.yml
sail.log


================================================
FILE: .prettierrc.json
================================================


================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct

## Our Pledge

We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.

We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.

## Our Standards

Examples of behavior that contributes to a positive environment for our
community include:

* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
  and learning from the experience
* Focusing on what is best not just for us as individuals, but for the
  overall community

Examples of unacceptable behavior include:

* The use of sexualized language or imagery, and sexual attention or
  advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
  address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
  professional setting

## Enforcement Responsibilities

Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.

Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.

## Scope

This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
contact@sinanaydogan.com.tr.
All complaints will be reviewed and investigated promptly and fairly.

All community leaders are obligated to respect the privacy and security of the
reporter of any incident.

## Enforcement Guidelines

Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:

### 1. Correction

**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.

**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.

### 2. Warning

**Community Impact**: A violation through a single incident or series
of actions.

**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.

### 3. Temporary Ban

**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.

**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.

### 4. Permanent Ban

**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior,  harassment of an
individual, or aggression toward or disparagement of classes of individuals.

**Consequence**: A permanent ban from any sort of public interaction within
the community.

## Attribution

This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.

Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).

[homepage]: https://www.contributor-covenant.org

For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2021 Sinan AYDOĞAN

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================

# TailAdmin Inertia

![TailAdmin](public/img/demo/tailadmin_v2.jpg)

It's a dashboard theme/UI-Starter Kit with **Laravel 12**, **TailwindCSS 3**, **Inertia.js** and **Vue 3 (JetStream)**.

> :wave: If you are looking for the Vue2 version, download [TailAdmin v1](https://github.com/sinan-aydogan/tailadmin-laravel/releases/tag/v.1.0.0) :wave:

![Laravel](https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white)
![Tailwind_CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
![Vue.js](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D)

[![Ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/sinanaydogan)
[![BuyMeACoffee](public/img/demo/bmc-button.png)](https://www.buymeacoffee.com/sinanaydogan)
[![Discord](public/img/demo/discord_2.svg)](https://discord.gg/TnjA2GqYmw)

## GitAds Sponsored
[![Sponsored by GitAds](https://gitads.dev/v1/ad-serve?source=sinan-aydogan/tailadmin-laravel@github)](https://gitads.dev/v1/ad-track?source=sinan-aydogan/tailadmin-laravel@github)


Requirements
------
1. PHP min v.8.3
2. DB server (Recommended:MySQL)
3. [composer min v.2](https://getcomposer.org/)
4. [nodejs min v.20](https://nodejs.org/)
5. Please check other requirements of  [Laravel](https://laravel.com/) and [Inertia](https://inertiajs.com/)


Setup Directions
------

1. ```npm install```
2. ```composer install```
3. Please clone .env.example and copied file name change from .env.example to .env
4. Create a clean db table
5. Set database infos in the .env
6. ```php artisan migrate --seed```
7. ```php artisan storage:link```
8. ```php artisan key:generate```
9. ```npm run dev```
10. ```php artisan serve```
11. ```Goto: http://localhost:8000```

Setup Directions with Docker - Linux

1. Setup Docker with user permissions on pc
2. clone this repo to any directory ```git clone sinan-aydogan/tailadmin-laravel```
3. Enter project root directory by terminal for example ```cd tailadmin-laravel```
4. Install composer packages by docker, because your host machine doesn't have php, mysql, nginx etc. Everything is in the docker containers
   ```docker run --rm \ -u "$(id -u):$(id -g)" \ -v "$(pwd):/var/www/html" \ -w /var/www/html \ laravelsail/php83-composer:latest \composer install --ignore-platform-reqs```
5. You should add an alias to your .bashrc file for shorcut to sail. ```sudo nano ~/.bashrc```
6. Adds this lines end of the file ```alias sail='sh $([ -f sail ] && echo sail || echo vendor/bin/sail)'```
7. Apply changes ```source ~/.bashrc```
8. You can start the project with sail ```sail up -d```
9. Don't forget add to domain to your host file ```sudo nano /etc/hosts```
    - ```127.0.0.1 tailadmin-laravel.test```
10. Go to ```http://tailadmin-laravel.test``` or your custom domain 

Admin Login Infos / Demo Account
------

- **Demo:** *[https://tailadmin-demo.tailadmin.dev](https://tailadmin-demo.tailadmin.dev)*
- **Email:** *admin@tailadmin.dev*
- **Password:** *admin*


[![TailAdmin Demo](public/img/demo/youtube.jpg)](https://www.youtube.com/playlist?list=PLbdS49WKsrOXTo_X_Ja6P3zll1yyhoIYN)

## Help

If you need to help more than this documentation: 
 - You can join our [Discord Channel](https://discord.gg/TnjA2GqYmw) then ask your questions
 - Access to our [Tabbs page](https://tailadmin.tabbs.co/) for how to make links (Install in Linux, solution of the npm errors etc.)

## Featured :

- TailwindCSS
- Vue.js 3 Laravel 12 - JetStream Inertia
- Every component are well documented
- Easy usability
- Simple and short code blocks
- A lot of customization options for every component
- Responsive, you can use with all devices
- Custom Auth Pages: Login, Register, Profile, Lock
- Unique Form Inputs: Repeatable Fields, Select(Rich Content) and Date
- Completely UI Kit
- Statistic Widgets for Summary or Small Data Windows
- It works with FontAwesome
- ### Content Components :
    - Alert 
    - Avatar / Avatar Group for Team Lists 
    - Badge 
    - Breadcrumb 
    - Buttons 
    - Content Card
    - Collapsible Content
    - Dropdowns
    - Lists 
    - Modals 
    - Pagination
    - Popovers 
    - Progress 
    - Statistic Widgets
    - Tabs 
    - FrontEnd Table
    - BackEnd Table 
      - With Dynamic Query Builder
      - Auto generated advanced search fields
      - Sort 
      - Show-hide columns
    - Tooltips

- ### Form Components :
    - Form Content 
    - Form Section 
    - Input Group 
    - HTML Inputs 
    - Text Input
    - Selectable Text Input (Combo)
    - File Input
    - Checkbox
    - Radio
    - Text Area
    - Select
    - Multi Select
    - Repeatable Fields
    - Date/Calendar Input
    - Between Input

> :rocket:  We are going to make the big updates about app because this theme is using in our projects therefore the updates will be continuous

---

### Partners and Sponsors

## GitAds Sponsored
[![Sponsored by GitAds](https://gitads.dev/v1/ad-serve?source=sinan-aydogan/tailadmin-laravel@github)](https://gitads.dev/v1/ad-track?source=sinan-aydogan/tailadmin-laravel@github)

> :metal: If you want to support us, you can send a mail to us via [admin@tailadmin.dev](mailto:admin@tailadmin.dev)

---

### Major External Sources

- [Tailwind](https://tailwindcss.com/)
- [Vue](https://vuejs.org/)
- [Fontawesome](https://fontawesome.com/)

### Minor External Sources

Please see package.json

---
License
------
The TailAdmin is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).


[![Ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/sinanaydogan)
[![BuyMeACoffee](public/img/demo/bmc-button.png)](https://www.buymeacoffee.com/sinanaydogan)

<!-- GitAds-Verify: XU4WES5HAT2HRC3LCB7K9L4CQZ4CIAN8 -->


================================================
FILE: app/Actions/Fortify/CreateNewUser.php
================================================
<?php

namespace App\Actions\Fortify;

use App\Models\Team;
use App\Models\User;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Laravel\Fortify\Contracts\CreatesNewUsers;
use Laravel\Jetstream\Jetstream;

class CreateNewUser implements CreatesNewUsers
{
    use PasswordValidationRules;

    /**
     * Create a newly registered user.
     *
     * @param  array<string, string>  $input
     */
    public function create(array $input): User
    {
        Validator::make($input, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => $this->passwordRules(),
            'terms' => Jetstream::hasTermsAndPrivacyPolicyFeature() ? ['accepted', 'required'] : '',
        ])->validate();

        return DB::transaction(function () use ($input) {
            return tap(User::create([
                'name' => $input['name'],
                'email' => $input['email'],
                'password' => Hash::make($input['password']),
            ]), function (User $user) {
                $this->createTeam($user);
            });
        });
    }

    /**
     * Create a personal team for the user.
     */
    protected function createTeam(User $user): void
    {
        $user->ownedTeams()->save(Team::forceCreate([
            'user_id' => $user->id,
            'name' => explode(' ', $user->name, 2)[0]."'s Team",
            'personal_team' => true,
        ]));
    }
}


================================================
FILE: app/Actions/Fortify/PasswordValidationRules.php
================================================
<?php

namespace App\Actions\Fortify;

use Illuminate\Validation\Rules\Password;

trait PasswordValidationRules
{
    /**
     * Get the validation rules used to validate passwords.
     *
     * @return array<int, \Illuminate\Contracts\Validation\Rule|array<mixed>|string>
     */
    protected function passwordRules(): array
    {
        return ['required', 'string', Password::default(), 'confirmed'];
    }
}


================================================
FILE: app/Actions/Fortify/ResetUserPassword.php
================================================
<?php

namespace App\Actions\Fortify;

use App\Models\User;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Laravel\Fortify\Contracts\ResetsUserPasswords;

class ResetUserPassword implements ResetsUserPasswords
{
    use PasswordValidationRules;

    /**
     * Validate and reset the user's forgotten password.
     *
     * @param  array<string, string>  $input
     */
    public function reset(User $user, array $input): void
    {
        Validator::make($input, [
            'password' => $this->passwordRules(),
        ])->validate();

        $user->forceFill([
            'password' => Hash::make($input['password']),
        ])->save();
    }
}


================================================
FILE: app/Actions/Fortify/UpdateUserPassword.php
================================================
<?php

namespace App\Actions\Fortify;

use App\Models\User;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Laravel\Fortify\Contracts\UpdatesUserPasswords;

class UpdateUserPassword implements UpdatesUserPasswords
{
    use PasswordValidationRules;

    /**
     * Validate and update the user's password.
     *
     * @param  array<string, string>  $input
     */
    public function update(User $user, array $input): void
    {
        Validator::make($input, [
            'current_password' => ['required', 'string', 'current_password:web'],
            'password' => $this->passwordRules(),
        ], [
            'current_password.current_password' => __('The provided password does not match your current password.'),
        ])->validateWithBag('updatePassword');

        $user->forceFill([
            'password' => Hash::make($input['password']),
        ])->save();
    }
}


================================================
FILE: app/Actions/Fortify/UpdateUserProfileInformation.php
================================================
<?php

namespace App\Actions\Fortify;

use App\Models\User;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Support\Facades\Validator;
use Illuminate\Validation\Rule;
use Laravel\Fortify\Contracts\UpdatesUserProfileInformation;

class UpdateUserProfileInformation implements UpdatesUserProfileInformation
{
    /**
     * Validate and update the given user's profile information.
     *
     * @param  array<string, mixed>  $input
     */
    public function update(User $user, array $input): void
    {
        Validator::make($input, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'email', 'max:255', Rule::unique('users')->ignore($user->id)],
            'photo' => ['nullable', 'mimes:jpg,jpeg,png', 'max:1024'],
        ])->validateWithBag('updateProfileInformation');

        if (isset($input['photo'])) {
            $user->updateProfilePhoto($input['photo']);
        }

        if ($input['email'] !== $user->email &&
            $user instanceof MustVerifyEmail) {
            $this->updateVerifiedUser($user, $input);
        } else {
            $user->forceFill([
                'name' => $input['name'],
                'email' => $input['email'],
            ])->save();
        }
    }

    /**
     * Update the given verified user's profile information.
     *
     * @param  array<string, string>  $input
     */
    protected function updateVerifiedUser(User $user, array $input): void
    {
        $user->forceFill([
            'name' => $input['name'],
            'email' => $input['email'],
            'email_verified_at' => null,
        ])->save();

        $user->sendEmailVerificationNotification();
    }
}


================================================
FILE: app/Actions/Jetstream/AddTeamMember.php
================================================
<?php

namespace App\Actions\Jetstream;

use App\Models\Team;
use App\Models\User;
use Closure;
use Illuminate\Support\Facades\Gate;
use Illuminate\Support\Facades\Validator;
use Laravel\Jetstream\Contracts\AddsTeamMembers;
use Laravel\Jetstream\Events\AddingTeamMember;
use Laravel\Jetstream\Events\TeamMemberAdded;
use Laravel\Jetstream\Jetstream;
use Laravel\Jetstream\Rules\Role;

class AddTeamMember implements AddsTeamMembers
{
    /**
     * Add a new team member to the given team.
     */
    public function add(User $user, Team $team, string $email, ?string $role = null): void
    {
        Gate::forUser($user)->authorize('addTeamMember', $team);

        $this->validate($team, $email, $role);

        $newTeamMember = Jetstream::findUserByEmailOrFail($email);

        AddingTeamMember::dispatch($team, $newTeamMember);

        $team->users()->attach(
            $newTeamMember, ['role' => $role]
        );

        TeamMemberAdded::dispatch($team, $newTeamMember);
    }

    /**
     * Validate the add member operation.
     */
    protected function validate(Team $team, string $email, ?string $role): void
    {
        Validator::make([
            'email' => $email,
            'role' => $role,
        ], $this->rules(), [
            'email.exists' => __('We were unable to find a registered user with this email address.'),
        ])->after(
            $this->ensureUserIsNotAlreadyOnTeam($team, $email)
        )->validateWithBag('addTeamMember');
    }

    /**
     * Get the validation rules for adding a team member.
     *
     * @return array<string, \Illuminate\Contracts\Validation\Rule|array|string>
     */
    protected function rules(): array
    {
        return array_filter([
            'email' => ['required', 'email', 'exists:users'],
            'role' => Jetstream::hasRoles()
                            ? ['required', 'string', new Role]
                            : null,
        ]);
    }

    /**
     * Ensure that the user is not already on the team.
     */
    protected function ensureUserIsNotAlreadyOnTeam(Team $team, string $email): Closure
    {
        return function ($validator) use ($team, $email) {
            $validator->errors()->addIf(
                $team->hasUserWithEmail($email),
                'email',
                __('This user already belongs to the team.')
            );
        };
    }
}


================================================
FILE: app/Actions/Jetstream/CreateTeam.php
================================================
<?php

namespace App\Actions\Jetstream;

use App\Models\Team;
use App\Models\User;
use Illuminate\Support\Facades\Gate;
use Illuminate\Support\Facades\Validator;
use Laravel\Jetstream\Contracts\CreatesTeams;
use Laravel\Jetstream\Events\AddingTeam;
use Laravel\Jetstream\Jetstream;

class CreateTeam implements CreatesTeams
{
    /**
     * Validate and create a new team for the given user.
     *
     * @param  array<string, string>  $input
     */
    public function create(User $user, array $input): Team
    {
        Gate::forUser($user)->authorize('create', Jetstream::newTeamModel());

        Validator::make($input, [
            'name' => ['required', 'string', 'max:255'],
        ])->validateWithBag('createTeam');

        AddingTeam::dispatch($user);

        $user->switchTeam($team = $user->ownedTeams()->create([
            'name' => $input['name'],
            'personal_team' => false,
        ]));

        return $team;
    }
}


================================================
FILE: app/Actions/Jetstream/DeleteTeam.php
================================================
<?php

namespace App\Actions\Jetstream;

use App\Models\Team;
use Laravel\Jetstream\Contracts\DeletesTeams;

class DeleteTeam implements DeletesTeams
{
    /**
     * Delete the given team.
     */
    public function delete(Team $team): void
    {
        $team->purge();
    }
}


================================================
FILE: app/Actions/Jetstream/DeleteUser.php
================================================
<?php

namespace App\Actions\Jetstream;

use App\Models\Team;
use App\Models\User;
use Illuminate\Support\Facades\DB;
use Laravel\Jetstream\Contracts\DeletesTeams;
use Laravel\Jetstream\Contracts\DeletesUsers;

class DeleteUser implements DeletesUsers
{
    /**
     * Create a new action instance.
     */
    public function __construct(protected DeletesTeams $deletesTeams)
    {
    }

    /**
     * Delete the given user.
     */
    public function delete(User $user): void
    {
        DB::transaction(function () use ($user) {
            $this->deleteTeams($user);
            $user->deleteProfilePhoto();
            $user->tokens->each->delete();
            $user->delete();
        });
    }

    /**
     * Delete the teams and team associations attached to the user.
     */
    protected function deleteTeams(User $user): void
    {
        $user->teams()->detach();

        $user->ownedTeams->each(function (Team $team) {
            $this->deletesTeams->delete($team);
        });
    }
}


================================================
FILE: app/Actions/Jetstream/InviteTeamMember.php
================================================
<?php

namespace App\Actions\Jetstream;

use App\Models\Team;
use App\Models\User;
use Closure;
use Illuminate\Database\Query\Builder;
use Illuminate\Support\Facades\Gate;
use Illuminate\Support\Facades\Mail;
use Illuminate\Support\Facades\Validator;
use Illuminate\Validation\Rule;
use Laravel\Jetstream\Contracts\InvitesTeamMembers;
use Laravel\Jetstream\Events\InvitingTeamMember;
use Laravel\Jetstream\Jetstream;
use Laravel\Jetstream\Mail\TeamInvitation;
use Laravel\Jetstream\Rules\Role;

class InviteTeamMember implements InvitesTeamMembers
{
    /**
     * Invite a new team member to the given team.
     */
    public function invite(User $user, Team $team, string $email, ?string $role = null): void
    {
        Gate::forUser($user)->authorize('addTeamMember', $team);

        $this->validate($team, $email, $role);

        InvitingTeamMember::dispatch($team, $email, $role);

        $invitation = $team->teamInvitations()->create([
            'email' => $email,
            'role' => $role,
        ]);

        Mail::to($email)->send(new TeamInvitation($invitation));
    }

    /**
     * Validate the invite member operation.
     */
    protected function validate(Team $team, string $email, ?string $role): void
    {
        Validator::make([
            'email' => $email,
            'role' => $role,
        ], $this->rules($team), [
            'email.unique' => __('This user has already been invited to the team.'),
        ])->after(
            $this->ensureUserIsNotAlreadyOnTeam($team, $email)
        )->validateWithBag('addTeamMember');
    }

    /**
     * Get the validation rules for inviting a team member.
     *
     * @return array<string, \Illuminate\Contracts\Validation\Rule|array|string>
     */
    protected function rules(Team $team): array
    {
        return array_filter([
            'email' => [
                'required', 'email',
                Rule::unique(Jetstream::teamInvitationModel())->where(function (Builder $query) use ($team) {
                    $query->where('team_id', $team->id);
                }),
            ],
            'role' => Jetstream::hasRoles()
                            ? ['required', 'string', new Role]
                            : null,
        ]);
    }

    /**
     * Ensure that the user is not already on the team.
     */
    protected function ensureUserIsNotAlreadyOnTeam(Team $team, string $email): Closure
    {
        return function ($validator) use ($team, $email) {
            $validator->errors()->addIf(
                $team->hasUserWithEmail($email),
                'email',
                __('This user already belongs to the team.')
            );
        };
    }
}


================================================
FILE: app/Actions/Jetstream/RemoveTeamMember.php
================================================
<?php

namespace App\Actions\Jetstream;

use App\Models\Team;
use App\Models\User;
use Illuminate\Auth\Access\AuthorizationException;
use Illuminate\Support\Facades\Gate;
use Illuminate\Validation\ValidationException;
use Laravel\Jetstream\Contracts\RemovesTeamMembers;
use Laravel\Jetstream\Events\TeamMemberRemoved;

class RemoveTeamMember implements RemovesTeamMembers
{
    /**
     * Remove the team member from the given team.
     */
    public function remove(User $user, Team $team, User $teamMember): void
    {
        $this->authorize($user, $team, $teamMember);

        $this->ensureUserDoesNotOwnTeam($teamMember, $team);

        $team->removeUser($teamMember);

        TeamMemberRemoved::dispatch($team, $teamMember);
    }

    /**
     * Authorize that the user can remove the team member.
     */
    protected function authorize(User $user, Team $team, User $teamMember): void
    {
        if (! Gate::forUser($user)->check('removeTeamMember', $team) &&
            $user->id !== $teamMember->id) {
            throw new AuthorizationException;
        }
    }

    /**
     * Ensure that the currently authenticated user does not own the team.
     */
    protected function ensureUserDoesNotOwnTeam(User $teamMember, Team $team): void
    {
        if ($teamMember->id === $team->owner->id) {
            throw ValidationException::withMessages([
                'team' => [__('You may not leave a team that you created.')],
            ])->errorBag('removeTeamMember');
        }
    }
}


================================================
FILE: app/Actions/Jetstream/UpdateTeamName.php
================================================
<?php

namespace App\Actions\Jetstream;

use App\Models\Team;
use App\Models\User;
use Illuminate\Support\Facades\Gate;
use Illuminate\Support\Facades\Validator;
use Laravel\Jetstream\Contracts\UpdatesTeamNames;

class UpdateTeamName implements UpdatesTeamNames
{
    /**
     * Validate and update the given team's name.
     *
     * @param  array<string, string>  $input
     */
    public function update(User $user, Team $team, array $input): void
    {
        Gate::forUser($user)->authorize('update', $team);

        Validator::make($input, [
            'name' => ['required', 'string', 'max:255'],
        ])->validateWithBag('updateTeamName');

        $team->forceFill([
            'name' => $input['name'],
        ])->save();
    }
}


================================================
FILE: app/Actions/TailAdmin/UpdateDarkModePreference.php
================================================
<?php

declare(strict_types=1);

namespace App\Actions\TailAdmin;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Validation\Rules\In;

final class UpdateDarkModePreference
{
    /**
     * Dark mode options available in the application.
     */
    private const DARK_MODE_OPTIONS = ['light', 'dark', 'auto'];

    /**
     * Validate and update the authenticated user's dark mode preference.
     *
     * @throws \Illuminate\Validation\ValidationException
     */
    public function update(Request $request): void
    {
        $validated = $request->validateWithBag('updateDarkModePreference', [
            'dark_mode' => ['required', new In(self::DARK_MODE_OPTIONS)],
        ]);

        /** @var User $user */
        $user = Auth::user();

        $user->update([
            'dark_mode' => $validated['dark_mode'],
        ]);
    }

    /**
     * Get available dark mode options.
     *
     * @return array<string>
     */
    public static function getAvailableOptions(): array
    {
        return self::DARK_MODE_OPTIONS;
    }
}


================================================
FILE: app/Actions/TailAdmin/UpdateUserLanguage.php
================================================
<?php

declare(strict_types=1);

namespace App\Actions\TailAdmin;

use App\Models\User;
use Carbon\Carbon;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\App;
use Illuminate\Support\Facades\Auth;
use Illuminate\Validation\Rules\In;

final class UpdateUserLanguage
{
    /**
     * Supported language codes in the application.
     */
    private const SUPPORTED_LANGUAGES = [
       'bg', 'de', 'en', 'fr', 'ru', 'tr', 'zh_CN'
    ];

    /**
     * Validate and update the authenticated user's preferred language.
     *
     * @throws \Illuminate\Validation\ValidationException
     */
    public function update(Request $request): void
    {
        $validated = $request->validateWithBag('updatePreferredLanguage', [
            'language' => [
                'required',
                'string',
                'max:5',
                new In(self::SUPPORTED_LANGUAGES)
            ],
        ]);

        /** @var User $user */
        $user = Auth::user();

        $user->update([
            'language' => $validated['language'],
        ]);

        $this->setApplicationLocale($validated['language'], $request);
    }

    /**
     * Set the application and Carbon locale.
     */
    private function setApplicationLocale(string $language, Request $request): void
    {
        App::setLocale($language);

        // Set Carbon locale with fallback handling
        $this->setCarbonLocale($language, $request);
    }

    /**
     * Set Carbon locale with proper format and fallback.
     */
    private function setCarbonLocale(string $language, Request $request): void
    {
        try {
            // Get session locale or use language as fallback
            $sessionLocale = $request->session()->get('locale', $language);

            // Format: language_COUNTRY.UTF-8 (e.g., tr_TR.UTF-8)
            $carbonLocale = sprintf(
                '%s_%s.UTF-8',
                $language,
                strtoupper($sessionLocale)
            );

            Carbon::setLocale($carbonLocale);
        } catch (\Exception $e) {
            // Fallback to just language code if full locale fails
            Carbon::setLocale($language);
        }
    }

    /**
     * Get supported language codes.
     *
     * @return array<string>
     */
    public static function getSupportedLanguages(): array
    {
        return self::SUPPORTED_LANGUAGES;
    }

    /**
     * Check if a language is supported.
     */
    public static function isLanguageSupported(string $language): bool
    {
        return in_array($language, self::SUPPORTED_LANGUAGES, true);
    }
}


================================================
FILE: app/Http/Controllers/Controller.php
================================================
<?php

namespace App\Http\Controllers;

abstract class Controller
{
    //
}


================================================
FILE: app/Http/Controllers/DemoContentController.php
================================================
<?php

namespace App\Http\Controllers;

use App\Http\Resources\DemoContentResource;
use App\Models\DemoContent;
use Illuminate\Http\Request;
use Inertia\Inertia;

class DemoContentController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Inertia\Response
     */
    public function index(Request $request)
    {
        $demoContent = DemoContentResource::collection(DemoContent::tableSearch($request->input('demoSearch')));

        return Inertia::render('Samples/Components/BackEndTable', [
            'demoContent' => $demoContent,
            'searchDataMainProducts' => DemoContent::getRelatedData('main_product_id', 'demo_contents')->get()
        ]);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\DemoContent  $demoContent
     * @return \Illuminate\Http\Response
     */
    public function show(DemoContent $demoContent)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\DemoContent  $demoContent
     * @return \Illuminate\Http\Response
     */
    public function edit(DemoContent $demoContent)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\DemoContent  $demoContent
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, DemoContent $demoContent)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\DemoContent  $demoContent
     * @return \Illuminate\Http\Response
     */
    public function destroy(DemoContent $demoContent)
    {
        //
    }
}


================================================
FILE: app/Http/Controllers/PermissionGroupController.php
================================================
<?php

namespace App\Http\Controllers;

use App\Models\PermissionGroup;
use App\Http\Requests\StorePermissionGroupRequest;
use App\Http\Requests\UpdatePermissionGroupRequest;

class PermissionGroupController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \App\Http\Requests\StorePermissionGroupRequest  $request
     * @return \Illuminate\Http\Response
     */
    public function store(StorePermissionGroupRequest $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\PermissionGroup  $permissionGroup
     * @return \Illuminate\Http\Response
     */
    public function show(PermissionGroup $permissionGroup)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\PermissionGroup  $permissionGroup
     * @return \Illuminate\Http\Response
     */
    public function edit(PermissionGroup $permissionGroup)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \App\Http\Requests\UpdatePermissionGroupRequest  $request
     * @param  \App\Models\PermissionGroup  $permissionGroup
     * @return \Illuminate\Http\Response
     */
    public function update(UpdatePermissionGroupRequest $request, PermissionGroup $permissionGroup)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\PermissionGroup  $permissionGroup
     * @return \Illuminate\Http\Response
     */
    public function destroy(PermissionGroup $permissionGroup)
    {
        //
    }
}


================================================
FILE: app/Http/Controllers/Settings/PermissionController.php
================================================
<?php

namespace App\Http\Controllers\Settings;

use App\Http\Controllers\Controller;
use App\Models\PermissionGroup;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Spatie\Permission\Models\Permission;

class PermissionController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Inertia\Response
     */
    public function index(Request $request)
    {
        return Inertia::render('Settings/Permission/Index', [
            'permissionGroups' => PermissionGroup::all(),
            'permissions' => Permission::tableSearch($request->input('searchObj'))
        ]);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Inertia\Response
     */
    public function create()
    {
        return Inertia::render('Settings/Permission/Create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}


================================================
FILE: app/Http/Controllers/Settings/RoleController.php
================================================
<?php

namespace App\Http\Controllers\Settings;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Session;
use Inertia\Inertia;
use Spatie\Permission\Models\Role;

class RoleController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Inertia\Response
     */
    public function index(Request $request)
    {
        return Inertia::render('Settings/Role/Index',[
            'Roles' => Role::tableSearch($request->input('searchObj'))
        ]);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Inertia\Response
     */
    public function create()
    {
        return Inertia::render('Settings/Role/Create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $role = Role::find($id);
        if($role->name != 'Super Admin'){
            Role::destroy($id);
            Session::flash('toastr', ['type' => 'gradient-red-to-pink', 'position' => 'rb','content' => '<b>'.$role->name. '</b> deleted']);
            return redirect()->back() ;
        }else{
            Session::flash('toastr', ['type' => 'solid-yellow', 'position' => 'rb','content' => '<b>You can\'t delete the super admin role</b>']);
            return redirect()->back() ;
        }
    }
}


================================================
FILE: app/Http/Controllers/Settings/SystemController.php
================================================
<?php

namespace App\Http\Controllers\Settings;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Inertia\Inertia;

class SystemController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Inertia\Response
     */
    public function index()
    {
        return Inertia::render('Settings/System');
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}


================================================
FILE: app/Http/Controllers/Settings/UserController.php
================================================
<?php

namespace App\Http\Controllers\Settings;

use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Session;
use Inertia\Inertia;
use Spatie\Permission\Models\Role;

class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Inertia\Response
     */
    public function index(Request $request)
    {
        return Inertia::render('Settings/User',[
            'role' => Role::all(['id','name']),
            'users'=> User::tableSearch($request->input('searchObj'))
        ]);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        if($id != 1){
            $user = User::find($id);
            User::destroy($id);
            Session::flash('toastr', ['type' => 'gradient-red-to-pink', 'position' => 'rb','content' => '<b>'.$user->name. '</b> deleted']);
            return redirect()->back() ;
        }else{
            Session::flash('toastr', ['type' => 'solid-yellow', 'position' => 'rb','content' => '<b>You can\'t delete the admin</b>']);
            return redirect()->back() ;
        }
    }
}


================================================
FILE: app/Http/Middleware/HandleInertiaRequests.php
================================================
<?php

declare(strict_types=1);

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Cache;
use Illuminate\Support\Facades\Session;
use Inertia\Middleware;
use Tighten\Ziggy\Ziggy;

final class HandleInertiaRequests extends Middleware
{
    /**
     * The root template that is loaded on the first page visit.
     */
    protected $rootView = 'app';

    /**
     * Cache duration for user permissions and roles (in minutes).
     */
    private const CACHE_DURATION = 60;

    /**
     * Determine the current asset version.
     */
    public function version(Request $request): ?string
    {
        return parent::version($request);
    }

    /**
     * Define the props that are shared by default.
     *
     * @return array<string, mixed>
     */
    public function share(Request $request): array
    {
        $data =[
            ...parent::share($request),
            'user_extra' => $this->getAuthenticatedUserData(),
            'ziggy' => $this->getZiggyData($request),
            'flash' => $this->getFlashMessages(),
        ];

        return $data;
    }

    /**
     * Get Ziggy routing data with location.
     *
     * @return \Closure(): array<string, mixed>
     */
    private function getZiggyData(Request $request)
    {
        return fn() => [
            ...(new Ziggy)->toArray(),
            'location' => $request->url(),
        ];
    }

    /**
     * Get flash messages from session.
     *
     * @return array<string, \Closure>
     */
    private function getFlashMessages(): array
    {
        return [
            'message' => fn() => Session::get('message'),
            'toastr' => fn() => Session::get('toastr'),
        ];
    }

    /**
     * Get current application locale.
     *
     * @return \Closure(): string|null
     */
    private function getCurrentLocale()
    {
        return fn() => Session::get('locale', app()->getLocale());
    }

    /**
     * Get authenticated user's roles with caching.
     *
     * @return array<string, mixed>
     */
    private function getUserRoles()
    {
        if (!Auth::check()) {
            return [];
        }

        $userId = Auth::id();
        $cacheKey = "user_roles_{$userId}";

        $data = Auth::user()?->getRoleNames()->toArray() ?? [];

        Cache::put($cacheKey, $data, self::CACHE_DURATION);

        return $data;
    }

    /**
     * Get authenticated user's permissions with caching.
     *
     * @return array<string, mixed>
     */
    private function getUserPermissions()
    {
        if (!Auth::check()) {
            return [];
        }

        $userId = Auth::id();
        $cacheKey = "user_permissions_{$userId}";

        $data = Auth::user()?->getAllPermissions()->pluck('name')->toArray() ?? [];

        Cache::put($cacheKey, $data, self::CACHE_DURATION);

        return $data;
    }

    /**
     * Get authenticated user data with essential information and caching.
     *
     * @return array<string, mixed>
     */
    private function getAuthenticatedUserData()
    {
        if (!Auth::check()) {
            return [];
        }

        $userId = Auth::id();
        $cacheKey = "user_data_{$userId}";

        if (! $userId) {
            return [];
        }

        $user = Auth::user();

        $data = [
            'lang' => $user->language ?? app()->getLocale(),
            'dark_mode' => $user->dark_mode ?? 'auto',
            'cached_at' => now()->toISOString(),
            'roles' => $this->getUserRoles(),
            'permissions' => $this->getUserPermissions(),
        ];

        Cache::put($cacheKey, $data, self::CACHE_DURATION);

        return $data;
    }

    /**
     * Clear all cached data for a specific user.
     * Call this method when user data is updated.
     */
    public static function clearUserCache(int $userId): void
    {
        $cacheKeys = [
            "user_data_{$userId}",
            "user_roles_{$userId}",
            "user_permissions_{$userId}",
        ];

        foreach ($cacheKeys as $key) {
            Cache::forget($key);
        }
    }

    /**
     * Clear cache for the currently authenticated user.
     */
    public static function clearCurrentUserCache(): void
    {
        if (Auth::check()) {
            self::clearUserCache(Auth::id());
        }
    }
}


================================================
FILE: app/Http/Middleware/LocalizationMiddleware.php
================================================
<?php

declare(strict_types=1);

namespace App\Http\Middleware;

use App\Actions\TailAdmin\UpdateUserLanguage;
use Carbon\Carbon;
use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\App;
use Symfony\Component\HttpFoundation\Response;

final class LocalizationMiddleware
{
    /**
     * Handle an incoming request.
     */
    public function handle(Request $request, Closure $next): Response
    {
        // Get session locale if available
        $sessionLocale = $request->session()->get('locale');

        if ($sessionLocale && UpdateUserLanguage::isLanguageSupported($sessionLocale)) {
            $this->setApplicationLocale($sessionLocale, $request);
        }

        return $next($request);
    }

    /**
     * Set the application and Carbon locale.
     */
    private function setApplicationLocale(string $language, Request $request): void
    {
        App::setLocale($language);
        $this->setCarbonLocale($language, $request);
    }

    /**
     * Set Carbon locale with proper format and fallback.
     */
    private function setCarbonLocale(string $language, Request $request): void
    {
        try {
            // Get session locale or use language as fallback
            $sessionLocale = $request->session()->get('locale', $language);

            // Format: language_COUNTRY.UTF-8 (e.g., tr_TR.UTF-8)
            $carbonLocale = sprintf(
                '%s_%s.UTF-8',
                $language,
                strtoupper($sessionLocale)
            );

            Carbon::setLocale($carbonLocale);
        } catch (\Exception $e) {
            // Fallback to just language code if full locale fails
            Carbon::setLocale($language);
        }
    }
}



================================================
FILE: app/Http/Requests/StorePermissionGroupRequest.php
================================================
<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StorePermissionGroupRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     */
    public function authorize(): bool
    {
        return false;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
     */
    public function rules(): array
    {
        return [
            //
        ];
    }
}


================================================
FILE: app/Http/Requests/UpdatePermissionGroupRequest.php
================================================
<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class UpdatePermissionGroupRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     */
    public function authorize(): bool
    {
        return false;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
     */
    public function rules(): array
    {
        return [
            //
        ];
    }
}


================================================
FILE: app/Http/Resources/DemoContentResource.php
================================================
<?php

namespace App\Http\Resources;

use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\JsonResource;

class DemoContentResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @return array<string, mixed>
     */
    public function toArray(Request $request)
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
            'price' => $this->price,
            'production_date' => $this->production_date,
            'main_product_id' => $this->main_product_id,
            'main_product_name' => $this->mainProduct->name,
            'type' => $this->type,
            'status' => $this->status,
        ];
    }
}


================================================
FILE: app/Models/DemoContent.php
================================================
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class DemoContent extends Model
{
    use HasFactory;

    /**
     * The attributes that are mass assignable.
     *
     * @var string[]
     */
    protected $fillable = ['name', 'type', 'price', 'production_date', 'status'];

    /**
     * The attributes that should be cast.
     *
     * @var array
     */
    protected $casts = [
        'production_date' => 'datetime',
    ];

    /**
     * Get the main demo content associated with the demo content.
     */
    public function mainProduct(): \Illuminate\Database\Eloquent\Relations\BelongsTo
    {
        return $this->belongsTo(DemoContent::class);
    }
}


================================================
FILE: app/Models/Membership.php
================================================
<?php

namespace App\Models;

use Laravel\Jetstream\Membership as JetstreamMembership;

class Membership extends JetstreamMembership
{
    /**
     * Indicates if the IDs are auto-incrementing.
     *
     * @var bool
     */
    public $incrementing = true;
}


================================================
FILE: app/Models/PermissionGroup.php
================================================
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Spatie\Permission\Models\Permission;

class PermissionGroup extends Model
{
    use HasFactory;

    /**
     * The attributes that are mass assignable.
     *
     * @var string[]
     */
    protected $fillable = [
        'name',
        'description'
    ];

    /**
     * Get the permissions associated with the permission group.
     */
    public function permissions()
    {
        return $this->hasMany(Permission::class);
    }
}


================================================
FILE: app/Models/Team.php
================================================
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Laravel\Jetstream\Events\TeamCreated;
use Laravel\Jetstream\Events\TeamDeleted;
use Laravel\Jetstream\Events\TeamUpdated;
use Laravel\Jetstream\Team as JetstreamTeam;

class Team extends JetstreamTeam
{
    /** @use HasFactory<\Database\Factories\TeamFactory> */
    use HasFactory;

    /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'personal_team',
    ];

    /**
     * The event map for the model.
     *
     * @var array<string, class-string>
     */
    protected $dispatchesEvents = [
        'created' => TeamCreated::class,
        'updated' => TeamUpdated::class,
        'deleted' => TeamDeleted::class,
    ];

    /**
     * Get the attributes that should be cast.
     *
     * @return array<string, string>
     */
    protected function casts(): array
    {
        return [
            'personal_team' => 'boolean',
        ];
    }
}


================================================
FILE: app/Models/TeamInvitation.php
================================================
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Laravel\Jetstream\Jetstream;
use Laravel\Jetstream\TeamInvitation as JetstreamTeamInvitation;

class TeamInvitation extends JetstreamTeamInvitation
{
    /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'email',
        'role',
    ];

    /**
     * Get the team that the invitation belongs to.
     */
    public function team(): BelongsTo
    {
        return $this->belongsTo(Jetstream::teamModel());
    }
}


================================================
FILE: app/Models/User.php
================================================
<?php

namespace App\Models;

// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Fortify\TwoFactorAuthenticatable;
use Laravel\Jetstream\HasProfilePhoto;
use Laravel\Jetstream\HasTeams;
use Laravel\Sanctum\HasApiTokens;
/*Spatie Permissions Package*/
use Spatie\Permission\Traits\HasRoles;


class User extends Authenticatable
{
    use HasApiTokens;

    /** @use HasFactory<\Database\Factories\UserFactory> */
    use HasFactory;
    use HasProfilePhoto;
    use HasTeams;
    use Notifiable;
    use TwoFactorAuthenticatable;
    /*Spatie Permissions Package*/
    use HasRoles;

    /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'language',
        'dark_mode',
        'theme',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array<int, string>
     */
    protected $hidden = [
        'password',
        'remember_token',
        'two_factor_recovery_codes',
        'two_factor_secret',
    ];

    /**
     * The accessors to append to the model's array form.
     *
     * @var array<int, string>
     */
    protected $appends = [
        'profile_photo_url',
    ];

    /**
     * Get the attributes that should be cast.
     *
     * @return array<string, string>
     */
    protected function casts(): array
    {
        return [
            'email_verified_at' => 'datetime',
            'password' => 'hashed',
        ];
    }
}


================================================
FILE: app/Policies/DemoContentPolicy.php
================================================
<?php

namespace App\Policies;

use App\Models\DemoContent;
use App\Models\User;
use Illuminate\Auth\Access\Response;

class DemoContentPolicy
{
    /**
     * Determine whether the user can view any models.
     */
    public function viewAny(User $user): bool
    {
        //
    }

    /**
     * Determine whether the user can view the model.
     */
    public function view(User $user, DemoContent $demoContent): bool
    {
        //
    }

    /**
     * Determine whether the user can create models.
     */
    public function create(User $user): bool
    {
        //
    }

    /**
     * Determine whether the user can update the model.
     */
    public function update(User $user, DemoContent $demoContent): bool
    {
        //
    }

    /**
     * Determine whether the user can delete the model.
     */
    public function delete(User $user, DemoContent $demoContent): bool
    {
        //
    }

    /**
     * Determine whether the user can restore the model.
     */
    public function restore(User $user, DemoContent $demoContent): bool
    {
        //
    }

    /**
     * Determine whether the user can permanently delete the model.
     */
    public function forceDelete(User $user, DemoContent $demoContent): bool
    {
        //
    }
}


================================================
FILE: app/Policies/PermissionGroupPolicy.php
================================================
<?php

namespace App\Policies;

use App\Models\PermissionGroup;
use App\Models\User;
use Illuminate\Auth\Access\Response;

class PermissionGroupPolicy
{
    /**
     * Determine whether the user can view any models.
     */
    public function viewAny(User $user): bool
    {
        //
    }

    /**
     * Determine whether the user can view the model.
     */
    public function view(User $user, PermissionGroup $permissionGroup): bool
    {
        //
    }

    /**
     * Determine whether the user can create models.
     */
    public function create(User $user): bool
    {
        //
    }

    /**
     * Determine whether the user can update the model.
     */
    public function update(User $user, PermissionGroup $permissionGroup): bool
    {
        //
    }

    /**
     * Determine whether the user can delete the model.
     */
    public function delete(User $user, PermissionGroup $permissionGroup): bool
    {
        //
    }

    /**
     * Determine whether the user can restore the model.
     */
    public function restore(User $user, PermissionGroup $permissionGroup): bool
    {
        //
    }

    /**
     * Determine whether the user can permanently delete the model.
     */
    public function forceDelete(User $user, PermissionGroup $permissionGroup): bool
    {
        //
    }
}


================================================
FILE: app/Policies/TeamPolicy.php
================================================
<?php

namespace App\Policies;

use App\Models\Team;
use App\Models\User;
use Illuminate\Auth\Access\HandlesAuthorization;

class TeamPolicy
{
    use HandlesAuthorization;

    /**
     * Determine whether the user can view any models.
     */
    public function viewAny(User $user): bool
    {
        return true;
    }

    /**
     * Determine whether the user can view the model.
     */
    public function view(User $user, Team $team): bool
    {
        return $user->belongsToTeam($team);
    }

    /**
     * Determine whether the user can create models.
     */
    public function create(User $user): bool
    {
        return true;
    }

    /**
     * Determine whether the user can update the model.
     */
    public function update(User $user, Team $team): bool
    {
        return $user->ownsTeam($team);
    }

    /**
     * Determine whether the user can add team members.
     */
    public function addTeamMember(User $user, Team $team): bool
    {
        return $user->ownsTeam($team);
    }

    /**
     * Determine whether the user can update team member permissions.
     */
    public function updateTeamMember(User $user, Team $team): bool
    {
        return $user->ownsTeam($team);
    }

    /**
     * Determine whether the user can remove team members.
     */
    public function removeTeamMember(User $user, Team $team): bool
    {
        return $user->ownsTeam($team);
    }

    /**
     * Determine whether the user can delete the model.
     */
    public function delete(User $user, Team $team): bool
    {
        return $user->ownsTeam($team);
    }
}


================================================
FILE: app/Providers/AppServiceProvider.php
================================================
<?php

namespace App\Providers;

use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Facades\Gate;
use Illuminate\Support\Facades\Schema;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        //Max key length error fix
        Schema::defaultStringLength(191);

        /*Super Admin*/
        Gate::before(function ($user, $ability) {
            return $user->hasRole('Super Admin') ? true : null;
        });

        Builder::macro('tableSearch', function ($request) {
            $request = (object)$request;
            $perPage = (isset($request->perPage)) ? $request->perPage : 5;

            if (key($request)) {

                $searchValue = (object)$request->searchValue;

                if ($request->searchType === "simple") {


                    /*Simple Search*/
                    $searchQuery = $this->when($searchValue->simpleSearchText, function ($query) use ($searchValue) {
                        foreach ($searchValue->simpleSearchFields as $field) {
                            $query->orWhere($field, 'like', '%' . $searchValue->simpleSearchText . '%');
                        }
                    });

                } else {

                    /*Compare Commands*/
                    function compareCondition($condition, $searchValue): array
                    {

                        $searchQuery = [];

                        switch ($condition) {

                            case 'contains' :
                                $searchQuery['condition'] = 'like';
                                $searchQuery['value'] = "%" . $searchValue . "%";
                                break;

                            case 'notContains' :
                                $searchQuery['condition'] = 'not like';
                                $searchQuery['value'] = "%" . $searchValue . "%";
                                break;

                            case 'starts' :
                                $searchQuery['condition'] = 'like';
                                $searchQuery['value'] = $searchValue . "%";
                                break;

                            case 'ends' :
                                $searchQuery['condition'] = 'like';
                                $searchQuery['value'] = "%" . $searchValue;
                                break;

                            case '>' :
                                $searchQuery['condition'] = '>';
                                $searchQuery['value'] = $searchValue;
                                break;

                            case '>=' :
                                $searchQuery['condition'] = '>=';
                                $searchQuery['value'] = $searchValue;
                                break;

                            case '<' :
                                $searchQuery['condition'] = '<';
                                $searchQuery['value'] = $searchValue;
                                break;

                            case '<=' :

                                $searchQuery['condition'] = '<=';
                                $searchQuery['value'] = $searchValue;
                                break;

                            case 'between' :

                                $searchQuery['condition'] = 'between';
                                $searchQuery['value'] = [$searchValue['from'], $searchValue['to']];
                                break;

                            default:

                                $searchQuery['condition'] = '=';
                                $searchQuery['value'] = $searchValue;
                        }

                        return $searchQuery;
                    }

                    /*Advanced Search*/
                    foreach ($searchValue as $key => $value) {

                        $field = compareCondition($value['condition'], $value['value']);

                        if ($value['condition'] === "between") {
                            $whenTrigger = $value['value']['from'] !== null || $value['value']['to'] !== null;
                        } else {
                            $whenTrigger = isset($value['value']);
                        }

                        $searchQuery = $this->when($whenTrigger, function ($query) use ($key, $field, $value) {
                            if ($value['condition'] === "between") {
                                $query->whereBetween($key, $field['value']);
                            } else {
                                $query->where($key, $field['condition'], $field['value']);
                            }
                        });

                    }

                }

                /*Order Function*/
                if ($request->sortDirection) {
                    $sortDirection = 'desc';
                } else {
                    $sortDirection = 'asc';
                }

                if ($request->sortKey) {
                    $searchQuery->orderBy($request->sortKey, $sortDirection);
                }

            } else {
                $searchQuery = $this;
            }


            return $searchQuery->paginate($perPage);
        });

        /*Get Related Data*/
        Builder::macro('getRelatedData', function ($key, $table) {
            return $this->whereIn('id', function ($query) use ($key, $table) {
                $query->select($key)
                    ->from($table)
                    ->distinct();
            });
        }
        );
    }
}


================================================
FILE: app/Providers/FortifyServiceProvider.php
================================================
<?php

namespace App\Providers;

use App\Actions\Fortify\CreateNewUser;
use App\Actions\Fortify\ResetUserPassword;
use App\Actions\Fortify\UpdateUserPassword;
use App\Actions\Fortify\UpdateUserProfileInformation;
use Illuminate\Cache\RateLimiting\Limit;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Str;
use Laravel\Fortify\Actions\RedirectIfTwoFactorAuthenticatable;
use Laravel\Fortify\Fortify;

class FortifyServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Fortify::createUsersUsing(CreateNewUser::class);
        Fortify::updateUserProfileInformationUsing(UpdateUserProfileInformation::class);
        Fortify::updateUserPasswordsUsing(UpdateUserPassword::class);
        Fortify::resetUserPasswordsUsing(ResetUserPassword::class);
        Fortify::redirectUserForTwoFactorAuthenticationUsing(RedirectIfTwoFactorAuthenticatable::class);

        RateLimiter::for('login', function (Request $request) {
            $throttleKey = Str::transliterate(Str::lower($request->input(Fortify::username())).'|'.$request->ip());

            return Limit::perMinute(5)->by($throttleKey);
        });

        RateLimiter::for('two-factor', function (Request $request) {
            return Limit::perMinute(5)->by($request->session()->get('login.id'));
        });
    }
}


================================================
FILE: app/Providers/JetstreamServiceProvider.php
================================================
<?php

namespace App\Providers;

use App\Actions\Jetstream\AddTeamMember;
use App\Actions\Jetstream\CreateTeam;
use App\Actions\Jetstream\DeleteTeam;
use App\Actions\Jetstream\DeleteUser;
use App\Actions\Jetstream\InviteTeamMember;
use App\Actions\Jetstream\RemoveTeamMember;
use App\Actions\Jetstream\UpdateTeamName;
use Illuminate\Support\ServiceProvider;
use Laravel\Jetstream\Jetstream;

class JetstreamServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        $this->configurePermissions();

        Jetstream::createTeamsUsing(CreateTeam::class);
        Jetstream::updateTeamNamesUsing(UpdateTeamName::class);
        Jetstream::addTeamMembersUsing(AddTeamMember::class);
        Jetstream::inviteTeamMembersUsing(InviteTeamMember::class);
        Jetstream::removeTeamMembersUsing(RemoveTeamMember::class);
        Jetstream::deleteTeamsUsing(DeleteTeam::class);
        Jetstream::deleteUsersUsing(DeleteUser::class);
    }

    /**
     * Configure the roles and permissions that are available within the application.
     */
    protected function configurePermissions(): void
    {
        Jetstream::defaultApiTokenPermissions(['read']);

        Jetstream::role('admin', 'Administrator', [
            'create',
            'read',
            'update',
            'delete',
        ])->description('Administrator users can perform any action.');

        Jetstream::role('editor', 'Editor', [
            'read',
            'create',
            'update',
        ])->description('Editor users have the ability to read, create, and update.');
    }
}


================================================
FILE: artisan
================================================
#!/usr/bin/env php
<?php

use Symfony\Component\Console\Input\ArgvInput;

define('LARAVEL_START', microtime(true));

// Register the Composer autoloader...
require __DIR__.'/vendor/autoload.php';

// Bootstrap Laravel and handle the command...
$status = (require_once __DIR__.'/bootstrap/app.php')
    ->handleCommand(new ArgvInput);

exit($status);


================================================
FILE: bootstrap/app.php
================================================
<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        api: __DIR__.'/../routes/api.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware): void {
        $middleware->web(append: [
            \App\Http\Middleware\HandleInertiaRequests::class,
            \App\Http\Middleware\LocalizationMiddleware::class,
            \Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class,
        ]);

        //
    })
    ->withExceptions(function (Exceptions $exceptions): void {
        //
    })->create();


================================================
FILE: bootstrap/cache/.gitignore
================================================
*
!.gitignore


================================================
FILE: bootstrap/providers.php
================================================
<?php

return [
    App\Providers\AppServiceProvider::class,
    App\Providers\FortifyServiceProvider::class,
    App\Providers\JetstreamServiceProvider::class,
];


================================================
FILE: composer.json
================================================
{
    "name": "sinan-aydogan/tailadmin-laravel",
    "type": "project",
    "description": "TailAdmin is a dashboard theme / UI starter kit with Laravel, TailwindCSS, Inertia and VueJS",
    "keywords": ["laravel", "admin", "dashboard", "starter kit", "component", "monolit", "admin panel", "tailadmin", "framework"],
    "license": "MIT",
    "require": {
        "php": "^8.2",
        "inertiajs/inertia-laravel": "^2.0",
        "laravel/framework": "^12.0",
        "laravel/jetstream": "^5.3",
        "laravel/sanctum": "^4.0",
        "laravel/tinker": "^2.10.1",
        "tightenco/ziggy": "^2.0",
        "spatie/laravel-permission": "^6.9"
    },
    "require-dev": {
        "barryvdh/laravel-debugbar": "^3.13",
        "fakerphp/faker": "^1.23",
        "laravel-lang/common": "^6.4",
        "laravel/pail": "^1.2.2",
        "laravel/pint": "^1.24",
        "laravel/sail": "^1.41",
        "mockery/mockery": "^1.6",
        "nunomaduro/collision": "^8.6",
        "pestphp/pest": "^4.1",
        "pestphp/pest-plugin-laravel": "^4.0"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi",
            "@php -r \"file_exists('database/database.sqlite') || touch('database/database.sqlite');\"",
            "@php artisan migrate --graceful --ansi"
        ],
        "dev": [
            "Composer\\Config::disableProcessTimeout",
            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite --kill-others"
        ],
        "test": [
            "@php artisan config:clear --ansi",
            "@php artisan test"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true,
        "allow-plugins": {
            "pestphp/pest-plugin": true,
            "php-http/discovery": true
        }
    },
    "minimum-stability": "stable",
    "prefer-stable": true
}


================================================
FILE: config/app.php
================================================
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Application Name
    |--------------------------------------------------------------------------
    |
    | This value is the name of your application, which will be used when the
    | framework needs to place the application's name in a notification or
    | other UI elements where an application name needs to be displayed.
    |
    */

    'name' => env('APP_NAME', 'TailAdmin'),

    /*
    |--------------------------------------------------------------------------
    | Application Environment
    |--------------------------------------------------------------------------
    |
    | This value determines the "environment" your application is currently
    | running in. This may determine how you prefer to configure various
    | services the application utilizes. Set this in your ".env" file.
    |
    */

    'env' => env('APP_ENV', 'production'),

    /*
    |--------------------------------------------------------------------------
    | Application Debug Mode
    |--------------------------------------------------------------------------
    |
    | When your application is in debug mode, detailed error messages with
    | stack traces will be shown on every error that occurs within your
    | application. If disabled, a simple generic error page is shown.
    |
    */

    'debug' => (bool) env('APP_DEBUG', false),

    /*
    |--------------------------------------------------------------------------
    | Application URL
    |--------------------------------------------------------------------------
    |
    | This URL is used by the console to properly generate URLs when using
    | the Artisan command line tool. You should set this to the root of
    | the application so that it's available within Artisan commands.
    |
    */

    'url' => env('APP_URL', 'http://localhost'),

    /*
    |--------------------------------------------------------------------------
    | Application Timezone
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default timezone for your application, which
    | will be used by the PHP date and date-time functions. The timezone
    | is set to "UTC" by default as it is suitable for most use cases.
    |
    */

    'timezone' => env('APP_TIMEZONE', 'UTC'),

    /*
    |--------------------------------------------------------------------------
    | Application Locale Configuration
    |--------------------------------------------------------------------------
    |
    | The application locale determines the default locale that will be used
    | by Laravel's translation / localization methods. This option can be
    | set to any locale for which you plan to have translation strings.
    |
    */

    'locale' => env('APP_LOCALE', 'en'),

    'fallback_locale' => env('APP_FALLBACK_LOCALE', 'en'),

    'faker_locale' => env('APP_FAKER_LOCALE', 'en_US'),

    /*
    |--------------------------------------------------------------------------
    | Encryption Key
    |--------------------------------------------------------------------------
    |
    | This key is utilized by Laravel's encryption services and should be set
    | to a random, 32 character string to ensure that all encrypted values
    | are secure. You should do this prior to deploying the application.
    |
    */

    'cipher' => 'AES-256-CBC',

    'key' => env('APP_KEY'),

    'previous_keys' => [
        ...array_filter(
            explode(',', env('APP_PREVIOUS_KEYS', ''))
        ),
    ],

    /*
    |--------------------------------------------------------------------------
    | Maintenance Mode Driver
    |--------------------------------------------------------------------------
    |
    | These configuration options determine the driver used to determine and
    | manage Laravel's "maintenance mode" status. The "cache" driver will
    | allow maintenance mode to be controlled across multiple machines.
    |
    | Supported drivers: "file", "cache"
    |
    */

    'maintenance' => [
        'driver' => env('APP_MAINTENANCE_DRIVER', 'file'),
        'store' => env('APP_MAINTENANCE_STORE', 'database'),
    ],

];


================================================
FILE: config/auth.php
================================================
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Authentication Defaults
    |--------------------------------------------------------------------------
    |
    | This option defines the default authentication "guard" and password
    | reset "broker" for your application. You may change these values
    | as required, but they're a perfect start for most applications.
    |
    */

    'defaults' => [
        'guard' => env('AUTH_GUARD', 'web'),
        'passwords' => env('AUTH_PASSWORD_BROKER', 'users'),
    ],

    /*
    |--------------------------------------------------------------------------
    | Authentication Guards
    |--------------------------------------------------------------------------
    |
    | Next, you may define every authentication guard for your application.
    | Of course, a great default configuration has been defined for you
    | which utilizes session storage plus the Eloquent user provider.
    |
    | All authentication guards have a user provider, which defines how the
    | users are actually retrieved out of your database or other storage
    | system used by the application. Typically, Eloquent is utilized.
    |
    | Supported: "session"
    |
    */

    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],
    ],

    /*
    |--------------------------------------------------------------------------
    | User Providers
    |--------------------------------------------------------------------------
    |
    | All authentication guards have a user provider, which defines how the
    | users are actually retrieved out of your database or other storage
    | system used by the application. Typically, Eloquent is utilized.
    |
    | If you have multiple user tables or models you may configure multiple
    | providers to represent the model / table. These providers may then
    | be assigned to any extra authentication guards you have defined.
    |
    | Supported: "database", "eloquent"
    |
    */

    'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => env('AUTH_MODEL', App\Models\User::class),
        ],

        // 'users' => [
        //     'driver' => 'database',
        //     'table' => 'users',
        // ],
    ],

    /*
    |--------------------------------------------------------------------------
    | Resetting Passwords
    |--------------------------------------------------------------------------
    |
    | These configuration options specify the behavior of Laravel's password
    | reset functionality, including the table utilized for token storage
    | and the user provider that is invoked to actually retrieve users.
    |
    | The expiry time is the number of minutes that each reset token will be
    | considered valid. This security feature keeps tokens short-lived so
    | they have less time to be guessed. You may change this as needed.
    |
    | The throttle setting is the number of seconds a user must wait before
    | generating more password reset tokens. This prevents the user from
    | quickly generating a very large amount of password reset tokens.
    |
    */

    'passwords' => [
        'users' => [
            'provider' => 'users',
            'table' => env('AUTH_PASSWORD_RESET_TOKEN_TABLE', 'password_reset_tokens'),
            'expire' => 60,
            'throttle' => 60,
        ],
    ],

    /*
    |--------------------------------------------------------------------------
    | Password Confirmation Timeout
    |--------------------------------------------------------------------------
    |
    | Here you may define the amount of seconds before a password confirmation
    | window expires and users are asked to re-enter their password via the
    | confirmation screen. By default, the timeout lasts for three hours.
    |
    */

    'password_timeout' => env('AUTH_PASSWORD_TIMEOUT', 10800),

];


================================================
FILE: config/cache.php
================================================
<?php

use Illuminate\Support\Str;

return [

    /*
    |--------------------------------------------------------------------------
    | Default Cache Store
    |--------------------------------------------------------------------------
    |
    | This option controls the default cache store that will be used by the
    | framework. This connection is utilized if another isn't explicitly
    | specified when running a cache operation inside the application.
    |
    */

    'default' => env('CACHE_STORE', 'database'),

    /*
    |--------------------------------------------------------------------------
    | Cache Stores
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the cache "stores" for your application as
    | well as their drivers. You may even define multiple stores for the
    | same cache driver to group types of items stored in your caches.
    |
    | Supported drivers: "array", "database", "file", "memcached",
    |                    "redis", "dynamodb", "octane", "null"
    |
    */

    'stores' => [

        'array' => [
            'driver' => 'array',
            'serialize' => false,
        ],

        'database' => [
            'driver' => 'database',
            'connection' => env('DB_CACHE_CONNECTION'),
            'table' => env('DB_CACHE_TABLE', 'cache'),
            'lock_connection' => env('DB_CACHE_LOCK_CONNECTION'),
            'lock_table' => env('DB_CACHE_LOCK_TABLE'),
        ],

        'file' => [
            'driver' => 'file',
            'path' => storage_path('framework/cache/data'),
            'lock_path' => storage_path('framework/cache/data'),
        ],

        'memcached' => [
            'driver' => 'memcached',
            'persistent_id' => env('MEMCACHED_PERSISTENT_ID'),
            'sasl' => [
                env('MEMCACHED_USERNAME'),
                env('MEMCACHED_PASSWORD'),
            ],
            'options' => [
                // Memcached::OPT_CONNECT_TIMEOUT => 2000,
            ],
            'servers' => [
                [
                    'host' => env('MEMCACHED_HOST', '127.0.0.1'),
                    'port' => env('MEMCACHED_PORT', 11211),
                    'weight' => 100,
                ],
            ],
        ],

        'redis' => [
            'driver' => 'redis',
            'connection' => env('REDIS_CACHE_CONNECTION', 'cache'),
            'lock_connection' => env('REDIS_CACHE_LOCK_CONNECTION', 'default'),
        ],

        'dynamodb' => [
            'driver' => 'dynamodb',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
            'table' => env('DYNAMODB_CACHE_TABLE', 'cache'),
            'endpoint' => env('DYNAMODB_ENDPOINT'),
        ],

        'octane' => [
            'driver' => 'octane',
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Cache Key Prefix
    |--------------------------------------------------------------------------
    |
    | When utilizing the APC, database, memcached, Redis, and DynamoDB cache
    | stores, there might be other applications using the same cache. For
    | that reason, you may prefix every cache key to avoid collisions.
    |
    */

    'prefix' => env('CACHE_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-cache-'),

];


================================================
FILE: config/database.php
================================================
<?php

use Illuminate\Support\Str;

return [

    /*
    |--------------------------------------------------------------------------
    | Default Database Connection Name
    |--------------------------------------------------------------------------
    |
    | Here you may specify which of the database connections below you wish
    | to use as your default connection for database operations. This is
    | the connection which will be utilized unless another connection
    | is explicitly specified when you execute a query / statement.
    |
    */

    'default' => env('DB_CONNECTION', 'sqlite'),

    /*
    |--------------------------------------------------------------------------
    | Database Connections
    |--------------------------------------------------------------------------
    |
    | Below are all of the database connections defined for your application.
    | An example configuration is provided for each database system which
    | is supported by Laravel. You're free to add / remove connections.
    |
    */

    'connections' => [

        'sqlite' => [
            'driver' => 'sqlite',
            'url' => env('DB_URL'),
            'database' => env('DB_DATABASE', database_path('database.sqlite')),
            'prefix' => '',
            'foreign_key_constraints' => env('DB_FOREIGN_KEYS', true),
            'busy_timeout' => null,
            'journal_mode' => null,
            'synchronous' => null,
            'transaction_mode' => 'DEFERRED',
        ],

        'mysql' => [
            'driver' => 'mysql',
            'url' => env('DB_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'laravel'),
            'username' => env('DB_USERNAME', 'root'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => env('DB_CHARSET', 'utf8mb4'),
            'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => 'InnoDb',
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

        'mariadb' => [
            'driver' => 'mariadb',
            'url' => env('DB_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'laravel'),
            'username' => env('DB_USERNAME', 'root'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => env('DB_CHARSET', 'utf8mb4'),
            'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

        'pgsql' => [
            'driver' => 'pgsql',
            'url' => env('DB_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '5432'),
            'database' => env('DB_DATABASE', 'laravel'),
            'username' => env('DB_USERNAME', 'root'),
            'password' => env('DB_PASSWORD', ''),
            'charset' => env('DB_CHARSET', 'utf8'),
            'prefix' => '',
            'prefix_indexes' => true,
            'search_path' => 'public',
            'sslmode' => 'prefer',
        ],

        'sqlsrv' => [
            'driver' => 'sqlsrv',
            'url' => env('DB_URL'),
            'host' => env('DB_HOST', 'localhost'),
            'port' => env('DB_PORT', '1433'),
            'database' => env('DB_DATABASE', 'laravel'),
            'username' => env('DB_USERNAME', 'root'),
            'password' => env('DB_PASSWORD', ''),
            'charset' => env('DB_CHARSET', 'utf8'),
            'prefix' => '',
            'prefix_indexes' => true,
            // 'encrypt' => env('DB_ENCRYPT', 'yes'),
            // 'trust_server_certificate' => env('DB_TRUST_SERVER_CERTIFICATE', 'false'),
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Migration Repository Table
    |--------------------------------------------------------------------------
    |
    | This table keeps track of all the migrations that have already run for
    | your application. Using this information, we can determine which of
    | the migrations on disk haven't actually been run on the database.
    |
    */

    'migrations' => [
        'table' => 'migrations',
        'update_date_on_publish' => true,
    ],

    /*
    |--------------------------------------------------------------------------
    | Redis Databases
    |--------------------------------------------------------------------------
    |
    | Redis is an open source, fast, and advanced key-value store that also
    | provides a richer body of commands than a typical key-value system
    | such as Memcached. You may define your connection settings here.
    |
    */

    'redis' => [

        'client' => env('REDIS_CLIENT', 'phpredis'),

        'options' => [
            'cluster' => env('REDIS_CLUSTER', 'redis'),
            'prefix' => env('REDIS_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-database-'),
            'persistent' => env('REDIS_PERSISTENT', false),
        ],

        'default' => [
            'url' => env('REDIS_URL'),
            'host' => env('REDIS_HOST', '127.0.0.1'),
            'username' => env('REDIS_USERNAME'),
            'password' => env('REDIS_PASSWORD'),
            'port' => env('REDIS_PORT', '6379'),
            'database' => env('REDIS_DB', '0'),
            'max_retries' => env('REDIS_MAX_RETRIES', 3),
            'backoff_algorithm' => env('REDIS_BACKOFF_ALGORITHM', 'decorrelated_jitter'),
            'backoff_base' => env('REDIS_BACKOFF_BASE', 100),
            'backoff_cap' => env('REDIS_BACKOFF_CAP', 1000),
        ],

        'cache' => [
            'url' => env('REDIS_URL'),
            'host' => env('REDIS_HOST', '127.0.0.1'),
            'username' => env('REDIS_USERNAME'),
            'password' => env('REDIS_PASSWORD'),
            'port' => env('REDIS_PORT', '6379'),
            'database' => env('REDIS_CACHE_DB', '1'),
            'max_retries' => env('REDIS_MAX_RETRIES', 3),
            'backoff_algorithm' => env('REDIS_BACKOFF_ALGORITHM', 'decorrelated_jitter'),
            'backoff_base' => env('REDIS_BACKOFF_BASE', 100),
            'backoff_cap' => env('REDIS_BACKOFF_CAP', 1000),
        ],

    ],

];


================================================
FILE: config/debugbar.php
================================================
<?php

return [

    /*
     |--------------------------------------------------------------------------
     | Debugbar Settings
     |--------------------------------------------------------------------------
     |
     | Debugbar is enabled by default, when debug is set to true in app.php.
     | You can override the value by setting enable to true or false instead of null.
     |
     | You can provide an array of URI's that must be ignored (eg. 'api/*')
     |
     */

    'enabled' => env('DEBUGBAR_ENABLED', null),
    'except' => [
        'telescope*',
        'horizon*',
    ],

    /*
     |--------------------------------------------------------------------------
     | Storage settings
     |--------------------------------------------------------------------------
     |
     | DebugBar stores data for session/ajax requests.
     | You can disable this, so the debugbar stores data in headers/session,
     | but this can cause problems with large data collectors.
     | By default, file storage (in the storage folder) is used. Redis and PDO
     | can also be used. For PDO, run the package migrations first.
     |
     | Warning: Enabling storage.open will allow everyone to access previous
     | request, do not enable open storage in publicly available environments!
     | Specify a callback if you want to limit based on IP or authentication.
     | Leaving it to null will allow localhost only.
     */
    'storage' => [
        'enabled'    => true,
        'open'       => env('DEBUGBAR_OPEN_STORAGE'), // bool/callback.
        'driver'     => 'file', // redis, file, pdo, socket, custom
        'path'       => storage_path('debugbar'), // For file driver
        'connection' => null,   // Leave null for default connection (Redis/PDO)
        'provider'   => '', // Instance of StorageInterface for custom driver
        'hostname'   => '127.0.0.1', // Hostname to use with the "socket" driver
        'port'       => 2304, // Port to use with the "socket" driver
    ],

    /*
    |--------------------------------------------------------------------------
    | Editor
    |--------------------------------------------------------------------------
    |
    | Choose your preferred editor to use when clicking file name.
    |
    | Supported: "phpstorm", "vscode", "vscode-insiders", "vscode-remote",
    |            "vscode-insiders-remote", "vscodium", "textmate", "emacs",
    |            "sublime", "atom", "nova", "macvim", "idea", "netbeans",
    |            "xdebug", "espresso"
    |
    */

    'editor' => env('DEBUGBAR_EDITOR') ?: env('IGNITION_EDITOR', 'phpstorm'),

    /*
    |--------------------------------------------------------------------------
    | Remote Path Mapping
    |--------------------------------------------------------------------------
    |
    | If you are using a remote dev server, like Laravel Homestead, Docker, or
    | even a remote VPS, it will be necessary to specify your path mapping.
    |
    | Leaving one, or both of these, empty or null will not trigger the remote
    | URL changes and Debugbar will treat your editor links as local files.
    |
    | "remote_sites_path" is an absolute base path for your sites or projects
    | in Homestead, Vagrant, Docker, or another remote development server.
    |
    | Example value: "/home/vagrant/Code"
    |
    | "local_sites_path" is an absolute base path for your sites or projects
    | on your local computer where your IDE or code editor is running on.
    |
    | Example values: "/Users/<name>/Code", "C:\Users\<name>\Documents\Code"
    |
    */

    'remote_sites_path' => env('DEBUGBAR_REMOTE_SITES_PATH'),
    'local_sites_path' => env('DEBUGBAR_LOCAL_SITES_PATH', env('IGNITION_LOCAL_SITES_PATH')),

    /*
     |--------------------------------------------------------------------------
     | Vendors
     |--------------------------------------------------------------------------
     |
     | Vendor files are included by default, but can be set to false.
     | This can also be set to 'js' or 'css', to only include javascript or css vendor files.
     | Vendor files are for css: font-awesome (including fonts) and highlight.js (css files)
     | and for js: jquery and highlight.js
     | So if you want syntax highlighting, set it to true.
     | jQuery is set to not conflict with existing jQuery scripts.
     |
     */

    'include_vendors' => true,

    /*
     |--------------------------------------------------------------------------
     | Capture Ajax Requests
     |--------------------------------------------------------------------------
     |
     | The Debugbar can capture Ajax requests and display them. If you don't want this (ie. because of errors),
     | you can use this option to disable sending the data through the headers.
     |
     | Optionally, you can also send ServerTiming headers on ajax requests for the Chrome DevTools.
     |
     | Note for your request to be identified as ajax requests they must either send the header
     | X-Requested-With with the value XMLHttpRequest (most JS libraries send this), or have application/json as a Accept header.
     |
     | By default `ajax_handler_auto_show` is set to true allowing ajax requests to be shown automatically in the Debugbar.
     | Changing `ajax_handler_auto_show` to false will prevent the Debugbar from reloading.
     */

    'capture_ajax' => true,
    'add_ajax_timing' => false,
    'ajax_handler_auto_show' => true,
    'ajax_handler_enable_tab' => true,

    /*
     |--------------------------------------------------------------------------
     | Custom Error Handler for Deprecated warnings
     |--------------------------------------------------------------------------
     |
     | When enabled, the Debugbar shows deprecated warnings for Symfony components
     | in the Messages tab.
     |
     */
    'error_handler' => false,

    /*
     |--------------------------------------------------------------------------
     | Clockwork integration
     |--------------------------------------------------------------------------
     |
     | The Debugbar can emulate the Clockwork headers, so you can use the Chrome
     | Extension, without the server-side code. It uses Debugbar collectors instead.
     |
     */
    'clockwork' => false,

    /*
     |--------------------------------------------------------------------------
     | DataCollectors
     |--------------------------------------------------------------------------
     |
     | Enable/disable DataCollectors
     |
     */

    'collectors' => [
        'phpinfo'         => true,  // Php version
        'messages'        => true,  // Messages
        'time'            => true,  // Time Datalogger
        'memory'          => true,  // Memory usage
        'exceptions'      => true,  // Exception displayer
        'log'             => true,  // Logs from Monolog (merged in messages if enabled)
        'db'              => true,  // Show database (PDO) queries and bindings
        'views'           => true,  // Views with their data
        'route'           => true,  // Current route information
        'auth'            => false, // Display Laravel authentication status
        'gate'            => true,  // Display Laravel Gate checks
        'session'         => true,  // Display session data
        'symfony_request' => true,  // Only one can be enabled..
        'mail'            => true,  // Catch mail messages
        'laravel'         => false, // Laravel version and environment
        'events'          => false, // All events fired
        'default_request' => false, // Regular or special Symfony request logger
        'logs'            => false, // Add the latest log messages
        'files'           => false, // Show the included files
        'config'          => false, // Display config settings
        'cache'           => false, // Display cache events
        'models'          => true,  // Display models
        'livewire'        => true,  // Display Livewire (when available)
        'jobs'            => true, // Display dispatched jobs
    ],

    /*
     |--------------------------------------------------------------------------
     | Extra options
     |--------------------------------------------------------------------------
     |
     | Configure some DataCollectors
     |
     */

    'options' => [
        'time' => [
            'memory_usage' => false,  // Calculated by subtracting memory start and end, it may be inaccurate
        ],
        'messages' => [
            'trace' => true,   // Trace the origin of the debug message
        ],
        'memory' => [
            'reset_peak' => false,     // run memory_reset_peak_usage before collecting
            'with_baseline' => false,  // Set boot memory usage as memory peak baseline
            'precision' => 0,          // Memory rounding precision
        ],
        'auth' => [
            'show_name' => true,   // Also show the users name/email in the debugbar
            'show_guards' => true, // Show the guards that are used
        ],
        'db' => [
            'with_params'       => true,   // Render SQL with the parameters substituted
            'backtrace'         => true,   // Use a backtrace to find the origin of the query in your files.
            'backtrace_exclude_paths' => [],   // Paths to exclude from backtrace. (in addition to defaults)
            'timeline'          => false,  // Add the queries to the timeline
            'duration_background'  => true,   // Show shaded background on each query relative to how long it took to execute.
            'explain' => [                 // Show EXPLAIN output on queries
                'enabled' => false,
                'types' => ['SELECT'],     // Deprecated setting, is always only SELECT
            ],
            'hints'             => false,    // Show hints for common mistakes
            'show_copy'         => false,    // Show copy button next to the query,
            'slow_threshold'    => false,   // Only track queries that last longer than this time in ms
            'memory_usage'      => false,   // Show queries memory usage
            'soft_limit'       => 100,      // After the soft limit, no parameters/backtrace are captured
            'hard_limit'       => 500,      // After the hard limit, queries are ignored
        ],
        'mail' => [
            'timeline' => false,  // Add mails to the timeline
            'show_body' => true,
        ],
        'views' => [
            'timeline' => false,    // Add the views to the timeline (Experimental)
            'data' => false,        //true for all data, 'keys' for only names, false for no parameters.
            'group' => 50,          // Group duplicate views. Pass value to auto-group, or true/false to force
            'exclude_paths' => [    // Add the paths which you don't want to appear in the views
                'vendor/filament'   // Exclude Filament components by default
            ],
        ],
        'route' => [
            'label' => true,  // show complete route on bar
        ],
        'session' => [
            'hiddens' => [], // hides sensitive values using array paths
        ],
        'symfony_request' => [
            'hiddens' => [], // hides sensitive values using array paths, example: request_request.password
        ],
        'events' => [
            'data' => true, // collect events data, listeners
        ],
        'logs' => [
            'file' => null,
        ],
        'cache' => [
            'values' => true, // collect cache values
        ],
    ],

    /*
     |--------------------------------------------------------------------------
     | Inject Debugbar in Response
     |--------------------------------------------------------------------------
     |
     | Usually, the debugbar is added just before </body>, by listening to the
     | Response after the App is done. If you disable this, you have to add them
     | in your template yourself. See http://phpdebugbar.com/docs/rendering.html
     |
     */

    'inject' => true,

    /*
     |--------------------------------------------------------------------------
     | DebugBar route prefix
     |--------------------------------------------------------------------------
     |
     | Sometimes you want to set route prefix to be used by DebugBar to load
     | its resources from. Usually the need comes from misconfigured web server or
     | from trying to overcome bugs like this: http://trac.nginx.org/nginx/ticket/97
     |
     */
    'route_prefix' => '_debugbar',

    /*
     |--------------------------------------------------------------------------
     | DebugBar route middleware
     |--------------------------------------------------------------------------
     |
     | Additional middleware to run on the Debugbar routes
     */
    'route_middleware' => [],

    /*
     |--------------------------------------------------------------------------
     | DebugBar route domain
     |--------------------------------------------------------------------------
     |
     | By default DebugBar route served from the same domain that request served.
     | To override default domain, specify it as a non-empty value.
     */
    'route_domain' => null,

    /*
     |--------------------------------------------------------------------------
     | DebugBar theme
     |--------------------------------------------------------------------------
     |
     | Switches between light and dark theme. If set to auto it will respect system preferences
     | Possible values: auto, light, dark
     */
    'theme' => env('DEBUGBAR_THEME', 'auto'),

    /*
     |--------------------------------------------------------------------------
     | Backtrace stack limit
     |--------------------------------------------------------------------------
     |
     | By default, the DebugBar limits the number of frames returned by the 'debug_backtrace()' function.
     | If you need larger stacktraces, you can increase this number. Setting it to 0 will result in no limit.
     */
    'debug_backtrace_limit' => 50,
];


================================================
FILE: config/filesystems.php
================================================
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Filesystem Disk
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default filesystem disk that should be used
    | by the framework. The "local" disk, as well as a variety of cloud
    | based disks are available to your application for file storage.
    |
    */

    'default' => env('FILESYSTEM_DISK', 'local'),

    /*
    |--------------------------------------------------------------------------
    | Filesystem Disks
    |--------------------------------------------------------------------------
    |
    | Below you may configure as many filesystem disks as necessary, and you
    | may even configure multiple disks for the same driver. Examples for
    | most supported storage drivers are configured here for reference.
    |
    | Supported drivers: "local", "ftp", "sftp", "s3"
    |
    */

    'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app/private'),
            'serve' => true,
            'throw' => false,
            'report' => false,
        ],

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
            'throw' => false,
            'report' => false,
        ],

        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
            'endpoint' => env('AWS_ENDPOINT'),
            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
            'throw' => false,
            'report' => false,
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Symbolic Links
    |--------------------------------------------------------------------------
    |
    | Here you may configure the symbolic links that will be created when the
    | `storage:link` Artisan command is executed. The array keys should be
    | the locations of the links and the values should be their targets.
    |
    */

    'links' => [
        public_path('storage') => storage_path('app/public'),
    ],

];


================================================
FILE: config/fortify.php
================================================
<?php

use Laravel\Fortify\Features;

return [

    /*
    |--------------------------------------------------------------------------
    | Fortify Guard
    |--------------------------------------------------------------------------
    |
    | Here you may specify which authentication guard Fortify will use while
    | authenticating users. This value should correspond with one of your
    | guards that is already present in your "auth" configuration file.
    |
    */

    'guard' => 'web',

    /*
    |--------------------------------------------------------------------------
    | Fortify Password Broker
    |--------------------------------------------------------------------------
    |
    | Here you may specify which password broker Fortify can use when a user
    | is resetting their password. This configured value should match one
    | of your password brokers setup in your "auth" configuration file.
    |
    */

    'passwords' => 'users',

    /*
    |--------------------------------------------------------------------------
    | Username / Email
    |--------------------------------------------------------------------------
    |
    | This value defines which model attribute should be considered as your
    | application's "username" field. Typically, this might be the email
    | address of the users but you are free to change this value here.
    |
    | Out of the box, Fortify expects forgot password and reset password
    | requests to have a field named 'email'. If the application uses
    | another name for the field you may define it below as needed.
    |
    */

    'username' => 'email',

    'email' => 'email',

    /*
    |--------------------------------------------------------------------------
    | Lowercase Usernames
    |--------------------------------------------------------------------------
    |
    | This value defines whether usernames should be lowercased before saving
    | them in the database, as some database system string fields are case
    | sensitive. You may disable this for your application if necessary.
    |
    */

    'lowercase_usernames' => true,

    /*
    |--------------------------------------------------------------------------
    | Home Path
    |--------------------------------------------------------------------------
    |
    | Here you may configure the path where users will get redirected during
    | authentication or password reset when the operations are successful
    | and the user is authenticated. You are free to change this value.
    |
    */

    'home' => '/',

    /*
    |--------------------------------------------------------------------------
    | Fortify Routes Prefix / Subdomain
    |--------------------------------------------------------------------------
    |
    | Here you may specify which prefix Fortify will assign to all the routes
    | that it registers with the application. If necessary, you may change
    | subdomain under which all of the Fortify routes will be available.
    |
    */

    'prefix' => '',

    'domain' => null,

    /*
    |--------------------------------------------------------------------------
    | Fortify Routes Middleware
    |--------------------------------------------------------------------------
    |
    | Here you may specify which middleware Fortify will assign to the routes
    | that it registers with the application. If necessary, you may change
    | these middleware but typically this provided default is preferred.
    |
    */

    'middleware' => ['web'],

    /*
    |--------------------------------------------------------------------------
    | Rate Limiting
    |--------------------------------------------------------------------------
    |
    | By default, Fortify will throttle logins to five requests per minute for
    | every email and IP address combination. However, if you would like to
    | specify a custom rate limiter to call then you may specify it here.
    |
    */

    'limiters' => [
        'login' => 'login',
        'two-factor' => 'two-factor',
    ],

    /*
    |--------------------------------------------------------------------------
    | Register View Routes
    |--------------------------------------------------------------------------
    |
    | Here you may specify if the routes returning views should be disabled as
    | you may not need them when building your own application. This may be
    | especially true if you're writing a custom single-page application.
    |
    */

    'views' => true,

    /*
    |--------------------------------------------------------------------------
    | Features
    |--------------------------------------------------------------------------
    |
    | Some of the Fortify features are optional. You may disable the features
    | by removing them from this array. You're free to only remove some of
    | these features or you can even remove all of these if you need to.
    |
    */

    'features' => [
        Features::registration(),
        Features::resetPasswords(),
        // Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        Features::twoFactorAuthentication([
            'confirm' => true,
            'confirmPassword' => true,
            // 'window' => 0,
        ]),
    ],

];


================================================
FILE: config/jetstream.php
================================================
<?php

use Laravel\Jetstream\Features;
use Laravel\Jetstream\Http\Middleware\AuthenticateSession;

return [

    /*
    |--------------------------------------------------------------------------
    | Jetstream Stack
    |--------------------------------------------------------------------------
    |
    | This configuration value informs Jetstream which "stack" you will be
    | using for your application. In general, this value is set for you
    | during installation and will not need to be changed after that.
    |
    */

    'stack' => 'inertia',

    /*
    |--------------------------------------------------------------------------
    | Jetstream Route Middleware
    |--------------------------------------------------------------------------
    |
    | Here you may specify which middleware Jetstream will assign to the routes
    | that it registers with the application. When necessary, you may modify
    | these middleware; however, this default value is usually sufficient.
    |
    */

    'middleware' => ['web'],

    'auth_session' => AuthenticateSession::class,

    /*
    |--------------------------------------------------------------------------
    | Jetstream Guard
    |--------------------------------------------------------------------------
    |
    | Here you may specify the authentication guard Jetstream will use while
    | authenticating users. This value should correspond with one of your
    | guards that is already present in your "auth" configuration file.
    |
    */

    'guard' => 'sanctum',

    /*
    |--------------------------------------------------------------------------
    | Features
    |--------------------------------------------------------------------------
    |
    | Some of Jetstream's features are optional. You may disable the features
    | by removing them from this array. You're free to only remove some of
    | these features or you can even remove all of these if you need to.
    |
    */

    'features' => [
        // Features::termsAndPrivacyPolicy(),
        Features::profilePhotos(),
        Features::api(),
        Features::teams(['invitations' => true]),
        Features::accountDeletion(),
    ],

    /*
    |--------------------------------------------------------------------------
    | Profile Photo Disk
    |--------------------------------------------------------------------------
    |
    | This configuration value determines the default disk that will be used
    | when storing profile photos for your application's users. Typically
    | this will be the "public" disk but you may adjust this if needed.
    |
    */

    'profile_photo_disk' => 'public',

];


================================================
FILE: config/localization.php
================================================
<?php

declare(strict_types=1);

use LaravelLang\Config\Constants\RouteName;
use LaravelLang\LocaleList\Locale;

return [
    /*
     * Determines what type of files to use when updating language files.
     *
     * @see https://laravel-lang.com/configuration.html#inline
     *
     * By default, `false`.
     */

    'inline' => (bool) env('LOCALIZATION_INLINE', env('LANG_PUBLISHER_INLINE')),

    /*
     * Do arrays need to be aligned by keys before processing arrays?
     *
     * @see https://laravel-lang.com/configuration.html#alignment
     *
     * By default, true
     */

    'align' => (bool) env('LOCALIZATION_ALIGN', env('LANG_PUBLISHER_ALIGN', true)),

    /*
     * The language codes chosen for the files in this repository may not
     * match the preferences for your project.
     *
     * Specify here mappings of localizations with your project.
     *
     * @see https://laravel-lang.com/configuration.html#aliases
     */

    'aliases' => [
        // \LaravelLang\LocaleList\Locale::German->value => 'de-DE',
        // \LaravelLang\LocaleList\Locale::GermanSwitzerland->value => 'de-CH',
    ],

    /*
     * This option determines the mechanism for converting translation
     * keys into a typographic version.
     *
     * @see https://laravel-lang.com/configuration.html#smart_punctuation
     *
     * By default, false
     */

    'smart_punctuation' => [
        'enable' => (bool) env('LOCALIZATION_SMART_ENABLED', false),

        'common' => [
            'double_quote_opener' => '“',
            'double_quote_closer' => '”',
            'single_quote_opener' => '‘',
            'single_quote_closer' => '’',
        ],

        'locales' => [
            Locale::French->value => [
                'double_quote_opener' => '«&nbsp;',
                'double_quote_closer' => '&nbsp;»',
                'single_quote_opener' => '‘',
                'single_quote_closer' => '’',
            ],

            Locale::Russian->value => [
                'double_quote_opener' => '«',
                'double_quote_closer' => '»',
                'single_quote_opener' => '‘',
                'single_quote_closer' => '’',
            ],

            Locale::Ukrainian->value => [
                'double_quote_opener' => '«',
                'double_quote_closer' => '»',
                'single_quote_opener' => '‘',
                'single_quote_closer' => '’',
            ],

            Locale::Belarusian->value => [
                'double_quote_opener' => '«',
                'double_quote_closer' => '»',
                'single_quote_opener' => '‘',
                'single_quote_closer' => '’',
            ],
        ],
    ],

    /*
     * This option defines the application's route settings.
     *
     * @see https://laravel-lang.com/configuration.html#routes
     */

    'routes' => [
        /*
         * This option defines the settings for the key names used when working with application routing.
         *
         * Default values:
         *
         *   parameter - locale
         *   header    - X-Localization
         *   cookie    - X-Localization
         *   session   - X-Localization
         *   column    - column
         */

        'names' => [
            'parameter' => RouteName::Parameter,
            'header'    => RouteName::Header,
            'cookie'    => RouteName::Cookie,
            'session'   => RouteName::Session,
            'column'    => RouteName::Column,
        ],

        /*
         * This option specifies the prefix of route group names.
         *
         * By default, `localized.`
         */

        'name_prefix' => env('LOCALIZATION_NAME_PREFIX', 'localized.'),

        /*
         * This option specifies the request redirection option when trying to open the default localization.
         *
         * Applies when using the `LaravelLang\Routes\Facades\LocalizationRoute` facade.
         */

        'redirect_default' => (bool) env('LOCALIZATION_REDIRECT_DEFAULT', false),
    ],

    /*
     * This option defines settings for working with model translations.
     *
     * @see https://laravel-lang.com/configuration.html#models
     */

    'models' => [
        /*
         * This option specifies a suffix for models containing translations.
         *
         * For example,
         *   main model is `App\Models\Page`
         *   translation model is `App\Models\PageTranslation`
         *
         * By default, `Translation`
         */

        'suffix' => 'Translation',

        /*
         * This option specifies a folder to store helper files for the IDE.
         *
         * By default, `vendor/_laravel_lang`
         */

        'helpers' => env('VENDOR_PATH', base_path('vendor/_laravel_lang')),
    ],

    /*
     * This option contains a list of translators that the Laravel Lang Translator project works with.
     *
     * Google Translate is enabled by default.
     *
     * @see https://laravel-lang.com/configuration.html#translators
     */

    'translators' => [
        /*
         * List of channels used for translations.
         *
         * By default,
         *
         *     Google is enabled
         *     Deepl  is disabled
         *     Yandex is disabled
         */

        'channels' => [
            'google' => [
                'translator' => '\LaravelLang\Translator\Integrations\Google',

                'enabled'  => (bool) env('TRANSLATION_GOOGLE_ENABLED', true),
                'priority' => (int) env('TRANSLATION_GOOGLE_PRIORITY', 1),
            ],

            'deepl' => [
                'translator' => '\LaravelLang\Translator\Integrations\Deepl',

                'enabled'  => (bool) env('TRANSLATION_DEEPL_ENABLED', false),
                'priority' => (int) env('TRANSLATION_DEEPL_PRIORITY', 2),

                'credentials' => [
                    'key' => (string) env('TRANSLATION_DEEPL_KEY'),
                ],
            ],

            'yandex' => [
                'translator' => '\LaravelLang\Translator\Integrations\Yandex',

                'enabled'  => (bool) env('TRANSLATION_YANDEX_ENABLED', false),
                'priority' => (int) env('TRANSLATION_YANDEX_PRIORITY', 3),

                'credentials' => [
                    'key'    => (string) env('TRANSLATION_YANDEX_KEY'),
                    'folder' => (string) env('TRANSLATION_YANDEX_FOLDER_ID'),
                ],
            ],
        ],

        'options' => [
            /*
             * Set a custom pattern for extracting replaceable keywords from the string,
             * default to extracting words prefixed with a colon.
             *
             *  Available options:
             *
             *     `true` is a `/:(\w+)/`
             *     `false` will disable regular expression processing
             *      `/any regex/` - any regular expression you specify
             *
             *   By default, `true`
             *
             * @example (e.g. "Hello :name" will extract "name")
             */

            'preserve_parameters' => true,
        ],
    ],
];


================================================
FILE: config/logging.php
================================================
<?php

use Monolog\Handler\NullHandler;
use Monolog\Handler\StreamHandler;
use Monolog\Handler\SyslogUdpHandler;
use Monolog\Processor\PsrLogMessageProcessor;

return [

    /*
    |--------------------------------------------------------------------------
    | Default Log Channel
    |--------------------------------------------------------------------------
    |
    | This option defines the default log channel that is utilized to write
    | messages to your logs. The value provided here should match one of
    | the channels present in the list of "channels" configured below.
    |
    */

    'default' => env('LOG_CHANNEL', 'stack'),

    /*
    |--------------------------------------------------------------------------
    | Deprecations Log Channel
    |--------------------------------------------------------------------------
    |
    | This option controls the log channel that should be used to log warnings
    | regarding deprecated PHP and library features. This allows you to get
    | your application ready for upcoming major versions of dependencies.
    |
    */

    'deprecations' => [
        'channel' => env('LOG_DEPRECATIONS_CHANNEL', 'null'),
        'trace' => env('LOG_DEPRECATIONS_TRACE', false),
    ],

    /*
    |--------------------------------------------------------------------------
    | Log Channels
    |--------------------------------------------------------------------------
    |
    | Here you may configure the log channels for your application. Laravel
    | utilizes the Monolog PHP logging library, which includes a variety
    | of powerful log handlers and formatters that you're free to use.
    |
    | Available drivers: "single", "daily", "slack", "syslog",
    |                    "errorlog", "monolog", "custom", "stack"
    |
    */

    'channels' => [

        'stack' => [
            'driver' => 'stack',
            'channels' => explode(',', (string) env('LOG_STACK', 'single')),
            'ignore_exceptions' => false,
        ],

        'single' => [
            'driver' => 'single',
            'path' => storage_path('logs/laravel.log'),
            'level' => env('LOG_LEVEL', 'debug'),
            'replace_placeholders' => true,
        ],

        'daily' => [
            'driver' => 'daily',
            'path' => storage_path('logs/laravel.log'),
            'level' => env('LOG_LEVEL', 'debug'),
            'days' => env('LOG_DAILY_DAYS', 14),
            'replace_placeholders' => true,
        ],

        'slack' => [
            'driver' => 'slack',
            'url' => env('LOG_SLACK_WEBHOOK_URL'),
            'username' => env('LOG_SLACK_USERNAME', 'Laravel Log'),
            'emoji' => env('LOG_SLACK_EMOJI', ':boom:'),
            'level' => env('LOG_LEVEL', 'critical'),
            'replace_placeholders' => true,
        ],

        'papertrail' => [
            'driver' => 'monolog',
            'level' => env('LOG_LEVEL', 'debug'),
            'handler' => env('LOG_PAPERTRAIL_HANDLER', SyslogUdpHandler::class),
            'handler_with' => [
                'host' => env('PAPERTRAIL_URL'),
                'port' => env('PAPERTRAIL_PORT'),
                'connectionString' => 'tls://'.env('PAPERTRAIL_URL').':'.env('PAPERTRAIL_PORT'),
            ],
            'processors' => [PsrLogMessageProcessor::class],
        ],

        'stderr' => [
            'driver' => 'monolog',
            'level' => env('LOG_LEVEL', 'debug'),
            'handler' => StreamHandler::class,
            'handler_with' => [
                'stream' => 'php://stderr',
            ],
            'formatter' => env('LOG_STDERR_FORMATTER'),
            'processors' => [PsrLogMessageProcessor::class],
        ],

        'syslog' => [
            'driver' => 'syslog',
            'level' => env('LOG_LEVEL', 'debug'),
            'facility' => env('LOG_SYSLOG_FACILITY', LOG_USER),
            'replace_placeholders' => true,
        ],

        'errorlog' => [
            'driver' => 'errorlog',
            'level' => env('LOG_LEVEL', 'debug'),
            'replace_placeholders' => true,
        ],

        'null' => [
            'driver' => 'monolog',
            'handler' => NullHandler::class,
        ],

        'emergency' => [
            'path' => storage_path('logs/laravel.log'),
        ],

    ],

];


================================================
FILE: config/mail.php
================================================
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Mailer
    |--------------------------------------------------------------------------
    |
    | This option controls the default mailer that is used to send all email
    | messages unless another mailer is explicitly specified when sending
    | the message. All additional mailers can be configured within the
    | "mailers" array. Examples of each type of mailer are provided.
    |
    */

    'default' => env('MAIL_MAILER', 'log'),

    /*
    |--------------------------------------------------------------------------
    | Mailer Configurations
    |--------------------------------------------------------------------------
    |
    | Here you may configure all of the mailers used by your application plus
    | their respective settings. Several examples have been configured for
    | you and you are free to add your own as your application requires.
    |
    | Laravel supports a variety of mail "transport" drivers that can be used
    | when delivering an email. You may specify which one you're using for
    | your mailers below. You may also add additional mailers if needed.
    |
    | Supported: "smtp", "sendmail", "mailgun", "ses", "ses-v2",
    |            "postmark", "resend", "log", "array",
    |            "failover", "roundrobin"
    |
    */

    'mailers' => [

        'smtp' => [
            'transport' => 'smtp',
            'scheme' => env('MAIL_SCHEME'),
            'url' => env('MAIL_URL'),
            'host' => env('MAIL_HOST', '127.0.0.1'),
            'port' => env('MAIL_PORT', 2525),
            'username' => env('MAIL_USERNAME'),
            'password' => env('MAIL_PASSWORD'),
            'timeout' => null,
            'local_domain' => env('MAIL_EHLO_DOMAIN', parse_url((string) env('APP_URL', 'http://localhost'), PHP_URL_HOST)),
        ],

        'ses' => [
            'transport' => 'ses',
        ],

        'postmark' => [
            'transport' => 'postmark',
            // 'message_stream_id' => env('POSTMARK_MESSAGE_STREAM_ID'),
            // 'client' => [
            //     'timeout' => 5,
            // ],
        ],

        'resend' => [
            'transport' => 'resend',
        ],

        'sendmail' => [
            'transport' => 'sendmail',
            'path' => env('MAIL_SENDMAIL_PATH', '/usr/sbin/sendmail -bs -i'),
        ],

        'log' => [
            'transport' => 'log',
            'channel' => env('MAIL_LOG_CHANNEL'),
        ],

        'array' => [
            'transport' => 'array',
        ],

        'failover' => [
            'transport' => 'failover',
            'mailers' => [
                'smtp',
                'log',
            ],
            'retry_after' => 60,
        ],

        'roundrobin' => [
            'transport' => 'roundrobin',
            'mailers' => [
                'ses',
                'postmark',
            ],
            'retry_after' => 60,
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Global "From" Address
    |--------------------------------------------------------------------------
    |
    | You may wish for all emails sent by your application to be sent from
    | the same address. Here you may specify a name and address that is
    | used globally for all emails that are sent by your application.
    |
    */

    'from' => [
        'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'),
        'name' => env('MAIL_FROM_NAME', 'Example'),
    ],

];


================================================
FILE: config/permission.php
================================================
<?php

return [

    'models' => [

        /*
         * When using the "HasPermissions" trait from this package, we need to know which
         * Eloquent model should be used to retrieve your permissions. Of course, it
         * is often just the "Permission" model but you may use whatever you like.
         *
         * The model you want to use as a Permission model needs to implement the
         * `Spatie\Permission\Contracts\Permission` contract.
         */

        'permission' => Spatie\Permission\Models\Permission::class,

        /*
         * When using the "HasRoles" trait from this package, we need to know which
         * Eloquent model should be used to retrieve your roles. Of course, it
         * is often just the "Role" model but you may use whatever you like.
         *
         * The model you want to use as a Role model needs to implement the
         * `Spatie\Permission\Contracts\Role` contract.
         */

        'role' => Spatie\Permission\Models\Role::class,

    ],

    'table_names' => [

        /*
         * When using the "HasRoles" trait from this package, we need to know which
         * table should be used to retrieve your roles. We have chosen a basic
         * default value but you may easily change it to any table you like.
         */

        'roles' => 'roles',

        /*
         * When using the "HasPermissions" trait from this package, we need to know which
         * table should be used to retrieve your permissions. We have chosen a basic
         * default value but you may easily change it to any table you like.
         */

        'permissions' => 'permissions',

        /*
         * When using the "HasPermissions" trait from this package, we need to know which
         * table should be used to retrieve your models permissions. We have chosen a
         * basic default value but you may easily change it to any table you like.
         */

        'model_has_permissions' => 'model_has_permissions',

        /*
         * When using the "HasRoles" trait from this package, we need to know which
         * table should be used to retrieve your models roles. We have chosen a
         * basic default value but you may easily change it to any table you like.
         */

        'model_has_roles' => 'model_has_roles',

        /*
         * When using the "HasRoles" trait from this package, we need to know which
         * table should be used to retrieve your roles permissions. We have chosen a
         * basic default value but you may easily change it to any table you like.
         */

        'role_has_permissions' => 'role_has_permissions',
    ],

    'column_names' => [
        /*
         * Change this if you want to name the related pivots other than defaults
         */
        'role_pivot_key' => null, //default 'role_id',
        'permission_pivot_key' => null, //default 'permission_id',

        /*
         * Change this if you want to name the related model primary key other than
         * `model_id`.
         *
         * For example, this would be nice if your primary keys are all UUIDs. In
         * that case, name this `model_uuid`.
         */

        'model_morph_key' => 'model_id',

        /*
         * Change this if you want to use the teams feature and your related model's
         * foreign key is other than `team_id`.
         */

        'team_foreign_key' => 'team_id',
    ],

    /*
     * When set to true, the method for checking permissions will be registered on the gate.
     * Set this to false if you want to implement custom logic for checking permissions.
     */

    'register_permission_check_method' => true,

    /*
     * When set to true, Laravel\Octane\Events\OperationTerminated event listener will be registered
     * this will refresh permissions on every TickTerminated, TaskTerminated and RequestTerminated
     * NOTE: This should not be needed in most cases, but an Octane/Vapor combination benefited from it.
     */
    'register_octane_reset_listener' => false,

    /*
     * Teams Feature.
     * When set to true the package implements teams using the 'team_foreign_key'.
     * If you want the migrations to register the 'team_foreign_key', you must
     * set this to true before doing the migration.
     * If you already did the migration then you must make a new migration to also
     * add 'team_foreign_key' to 'roles', 'model_has_roles', and 'model_has_permissions'
     * (view the latest version of this package's migration file)
     */

    'teams' => false,

    /*
     * Passport Client Credentials Grant
     * When set to true the package will use Passports Client to check permissions
     */

    'use_passport_client_credentials' => false,

    /*
     * When set to true, the required permission names are added to exception messages.
     * This could be considered an information leak in some contexts, so the default
     * setting is false here for optimum safety.
     */

    'display_permission_in_exception' => false,

    /*
     * When set to true, the required role names are added to exception messages.
     * This could be considered an information leak in some contexts, so the default
     * setting is false here for optimum safety.
     */

    'display_role_in_exception' => false,

    /*
     * By default wildcard permission lookups are disabled.
     * See documentation to understand supported syntax.
     */

    'enable_wildcard_permission' => false,

    /*
     * The class to use for interpreting wildcard permissions.
     * If you need to modify delimiters, override the class and specify its name here.
     */
    // 'permission.wildcard_permission' => Spatie\Permission\WildcardPermission::class,

    /* Cache-specific settings */

    'cache' => [

        /*
         * By default all permissions are cached for 24 hours to speed up performance.
         * When permissions or roles are updated the cache is flushed automatically.
         */

        'expiration_time' => \DateInterval::createFromDateString('24 hours'),

        /*
         * The cache key used to store all permissions.
         */

        'key' => 'spatie.permission.cache',

        /*
         * You may optionally indicate a specific cache driver to use for permission and
         * role caching using any of the `store` drivers listed in the cache.php config
         * file. Using 'default' here means to use the `default` set in cache.php.
         */

        'store' => 'default',
    ],
];


================================================
FILE: config/queue.php
================================================
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Queue Connection Name
    |--------------------------------------------------------------------------
    |
    | Laravel's queue supports a variety of backends via a single, unified
    | API, giving you convenient access to each backend using identical
    | syntax for each. The default queue connection is defined below.
    |
    */

    'default' => env('QUEUE_CONNECTION', 'database'),

    /*
    |--------------------------------------------------------------------------
    | Queue Connections
    |--------------------------------------------------------------------------
    |
    | Here you may configure the connection options for every queue backend
    | used by your application. An example configuration is provided for
    | each backend supported by Laravel. You're also free to add more.
    |
    | Drivers: "sync", "database", "beanstalkd", "sqs", "redis", "null"
    |
    */

    'connections' => [

        'sync' => [
            'driver' => 'sync',
        ],

        'database' => [
            'driver' => 'database',
            'connection' => env('DB_QUEUE_CONNECTION'),
            'table' => env('DB_QUEUE_TABLE', 'jobs'),
            'queue' => env('DB_QUEUE', 'default'),
            'retry_after' => (int) env('DB_QUEUE_RETRY_AFTER', 90),
            'after_commit' => false,
        ],

        'beanstalkd' => [
            'driver' => 'beanstalkd',
            'host' => env('BEANSTALKD_QUEUE_HOST', 'localhost'),
            'queue' => env('BEANSTALKD_QUEUE', 'default'),
            'retry_after' => (int) env('BEANSTALKD_QUEUE_RETRY_AFTER', 90),
            'block_for' => 0,
            'after_commit' => false,
        ],

        'sqs' => [
            'driver' => 'sqs',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'),
            'queue' => env('SQS_QUEUE', 'default'),
            'suffix' => env('SQS_SUFFIX'),
            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
            'after_commit' => false,
        ],

        'redis' => [
            'driver' => 'redis',
            'connection' => env('REDIS_QUEUE_CONNECTION', 'default'),
            'queue' => env('REDIS_QUEUE', 'default'),
            'retry_after' => (int) env('REDIS_QUEUE_RETRY_AFTER', 90),
            'block_for' => null,
            'after_commit' => false,
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Job Batching
    |--------------------------------------------------------------------------
    |
    | The following options configure the database and table that store job
    | batching information. These options can be updated to any database
    | connection and table which has been defined by your application.
    |
    */

    'batching' => [
        'database' => env('DB_CONNECTION', 'sqlite'),
        'table' => 'job_batches',
    ],

    /*
    |--------------------------------------------------------------------------
    | Failed Queue Jobs
    |--------------------------------------------------------------------------
    |
    | These options configure the behavior of failed queue job logging so you
    | can control how and where failed jobs are stored. Laravel ships with
    | support for storing failed jobs in a simple file or in a database.
    |
    | Supported drivers: "database-uuids", "dynamodb", "file", "null"
    |
    */

    'failed' => [
        'driver' => env('QUEUE_FAILED_DRIVER', 'database-uuids'),
        'database' => env('DB_CONNECTION', 'sqlite'),
        'table' => 'failed_jobs',
    ],

];


================================================
FILE: config/sanctum.php
================================================
<?php

use Laravel\Sanctum\Sanctum;

return [

    /*
    |--------------------------------------------------------------------------
    | Stateful Domains
    |--------------------------------------------------------------------------
    |
    | Requests from the following domains / hosts will receive stateful API
    | authentication cookies. Typically, these should include your local
    | and production domains which access your API via a frontend SPA.
    |
    */

    'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
        Sanctum::currentApplicationUrlWithPort(),
        // Sanctum::currentRequestHost(),
    ))),

    /*
    |--------------------------------------------------------------------------
    | Sanctum Guards
    |--------------------------------------------------------------------------
    |
    | This array contains the authentication guards that will be checked when
    | Sanctum is trying to authenticate a request. If none of these guards
    | are able to authenticate the request, Sanctum will use the bearer
    | token that's present on an incoming request for authentication.
    |
    */

    'guard' => ['web'],

    /*
    |--------------------------------------------------------------------------
    | Expiration Minutes
    |--------------------------------------------------------------------------
    |
    | This value controls the number of minutes until an issued token will be
    | considered expired. This will override any values set in the token's
    | "expires_at" attribute, but first-party sessions are not affected.
    |
    */

    'expiration' => null,

    /*
    |--------------------------------------------------------------------------
    | Token Prefix
    |--------------------------------------------------------------------------
    |
    | Sanctum can prefix new tokens in order to take advantage of numerous
    | security scanning initiatives maintained by open source platforms
    | that notify developers if they commit tokens into repositories.
    |
    | See: https://docs.github.com/en/code-security/secret-scanning/about-secret-scanning
    |
    */

    'token_prefix' => env('SANCTUM_TOKEN_PREFIX', ''),

    /*
    |--------------------------------------------------------------------------
    | Sanctum Middleware
    |--------------------------------------------------------------------------
    |
    | When authenticating your first-party SPA with Sanctum you may need to
    | customize some of the middleware Sanctum uses while processing the
    | request. You may change the middleware listed below as required.
    |
    */

    'middleware' => [
        'authenticate_session' => Laravel\Sanctum\Http\Middleware\AuthenticateSession::class,
        'encrypt_cookies' => Illuminate\Cookie\Middleware\EncryptCookies::class,
        'validate_csrf_token' => Illuminate\Foundation\Http\Middleware\ValidateCsrfToken::class,
    ],

];


================================================
FILE: config/services.php
================================================
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Third Party Services
    |--------------------------------------------------------------------------
    |
    | This file is for storing the credentials for third party services such
    | as Mailgun, Postmark, AWS and more. This file provides the de facto
    | location for this type of information, allowing packages to have
    | a conventional file to locate the various service credentials.
    |
    */

    'postmark' => [
        'token' => env('POSTMARK_TOKEN'),
    ],

    'resend' => [
        'key' => env('RESEND_KEY'),
    ],

    'ses' => [
        'key' => env('AWS_ACCESS_KEY_ID'),
        'secret' => env('AWS_SECRET_ACCESS_KEY'),
        'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
    ],

    'slack' => [
        'notifications' => [
            'bot_user_oauth_token' => env('SLACK_BOT_USER_OAUTH_TOKEN'),
            'channel' => env('SLACK_BOT_USER_DEFAULT_CHANNEL'),
        ],
    ],

];


================================================
FILE: config/session.php
================================================
<?php

use Illuminate\Support\Str;

return [

    /*
    |--------------------------------------------------------------------------
    | Default Session Driver
    |--------------------------------------------------------------------------
    |
    | This option determines the default session driver that is utilized for
    | incoming requests. Laravel supports a variety of storage options to
    | persist session data. Database storage is a great default choice.
    |
    | Supported: "file", "cookie", "database", "memcached",
    |            "redis", "dynamodb", "array"
    |
    */

    'driver' => env('SESSION_DRIVER', 'database'),

    /*
    |--------------------------------------------------------------------------
    | Session Lifetime
    |--------------------------------------------------------------------------
    |
    | Here you may specify the number of minutes that you wish the session
    | to be allowed to remain idle before it expires. If you want them
    | to expire immediately when the browser is closed then you may
    | indicate that via the expire_on_close configuration option.
    |
    */

    'lifetime' => (int) env('SESSION_LIFETIME', 120),

    'expire_on_close' => env('SESSION_EXPIRE_ON_CLOSE', false),

    /*
    |--------------------------------------------------------------------------
    | Session Encryption
    |--------------------------------------------------------------------------
    |
    | This option allows you to easily specify that all of your session data
    | should be encrypted before it's stored. All encryption is performed
    | automatically by Laravel and you may use the session like normal.
    |
    */

    'encrypt' => env('SESSION_ENCRYPT', false),

    /*
    |--------------------------------------------------------------------------
    | Session File Location
    |--------------------------------------------------------------------------
    |
    | When utilizing the "file" session driver, the session files are placed
    | on disk. The default storage location is defined here; however, you
    | are free to provide another location where they should be stored.
    |
    */

    'files' => storage_path('framework/sessions'),

    /*
    |--------------------------------------------------------------------------
    | Session Database Connection
    |--------------------------------------------------------------------------
    |
    | When using the "database" or "redis" session drivers, you may specify a
    | connection that should be used to manage these sessions. This should
    | correspond to a connection in your database configuration options.
    |
    */

    'connection' => env('SESSION_CONNECTION'),

    /*
    |--------------------------------------------------------------------------
    | Session Database Table
    |--------------------------------------------------------------------------
    |
    | When using the "database" session driver, you may specify the table to
    | be used to store sessions. Of course, a sensible default is defined
    | for you; however, you're welcome to change this to another table.
    |
    */

    'table' => env('SESSION_TABLE', 'sessions'),

    /*
    |--------------------------------------------------------------------------
    | Session Cache Store
    |--------------------------------------------------------------------------
    |
    | When using one of the framework's cache driven session backends, you may
    | define the cache store which should be used to store the session data
    | between requests. This must match one of your defined cache stores.
    |
    | Affects: "dynamodb", "memcached", "redis"
    |
    */

    'store' => env('SESSION_STORE'),

    /*
    |--------------------------------------------------------------------------
    | Session Sweeping Lottery
    |--------------------------------------------------------------------------
    |
    | Some session drivers must manually sweep their storage location to get
    | rid of old sessions from storage. Here are the chances that it will
    | happen on a given request. By default, the odds are 2 out of 100.
    |
    */

    'lottery' => [2, 100],

    /*
    |--------------------------------------------------------------------------
    | Session Cookie Name
    |--------------------------------------------------------------------------
    |
    | Here you may change the name of the session cookie that is created by
    | the framework. Typically, you should not need to change this value
    | since doing so does not grant a meaningful security improvement.
    |
    */

    'cookie' => env(
        'SESSION_COOKIE',
        Str::slug(env('APP_NAME', 'laravel')).'-session'
    ),

    /*
    |--------------------------------------------------------------------------
    | Session Cookie Path
    |--------------------------------------------------------------------------
    |
    | The session cookie path determines the path for which the cookie will
    | be regarded as available. Typically, this will be the root path of
    | your application, but you're free to change this when necessary.
    |
    */

    'path' => env('SESSION_PATH', '/'),

    /*
    |--------------------------------------------------------------------------
    | Session Cookie Domain
    |--------------------------------------------------------------------------
    |
    | This value determines the domain and subdomains the session cookie is
    | available to. By default, the cookie will be available to the root
    | domain and all subdomains. Typically, this shouldn't be changed.
    |
    */

    'domain' => env('SESSION_DOMAIN'),

    /*
    |--------------------------------------------------------------------------
    | HTTPS Only Cookies
    |--------------------------------------------------------------------------
    |
    | By setting this option to true, session cookies will only be sent back
    | to the server if the browser has a HTTPS connection. This will keep
    | the cookie from being sent to you when it can't be done securely.
    |
    */

    'secure' => env('SESSION_SECURE_COOKIE'),

    /*
    |--------------------------------------------------------------------------
    | HTTP Access Only
    |--------------------------------------------------------------------------
    |
    | Setting this value to true will prevent JavaScript from accessing the
    | value of the cookie and the cookie will only be accessible through
    | the HTTP protocol. It's unlikely you should disable this option.
    |
    */

    'http_only' => env('SESSION_HTTP_ONLY', true),

    /*
    |--------------------------------------------------------------------------
    | Same-Site Cookies
    |--------------------------------------------------------------------------
    |
    | This option determines how your cookies behave when cross-site requests
    | take place, and can be used to mitigate CSRF attacks. By default, we
    | will set this value to "lax" to permit secure cross-site requests.
    |
    | See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value
    |
    | Supported: "lax", "strict", "none", null
    |
    */

    'same_site' => env('SESSION_SAME_SITE', 'lax'),

    /*
    |--------------------------------------------------------------------------
    | Partitioned Cookies
    |--------------------------------------------------------------------------
    |
    | Setting this value to true will tie the cookie to the top-level site for
    | a cross-site context. Partitioned cookies are accepted by the browser
    | when flagged "secure" and the Same-Site attribute is set to "none".
    |
    */

    'partitioned' => env('SESSION_PARTITIONED_COOKIE', false),

];


================================================
FILE: database/.gitignore
================================================
*.sqlite*


================================================
FILE: database/factories/DemoContentFactory.php
================================================
<?php

namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Model>
 */
class DemoContentFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition(): array
    {
        return [
            'name' => $this->faker->randomNumber(3) . ("-" . $this->faker->colorName()),
            'type' => $this->faker->randomKey(['Printer', 'Pencil', 'Clipper']),
            'main_product_id' => $this->faker->numberBetween(1,50),
            'price' => $this->faker->randomFloat(2,5,80),
            'production_date' => $this->faker->dateTimeBetween('-5 years', 'now'),
            'status' => $this->faker->boolean
        ];
    }
}


================================================
FILE: database/factories/PermissionGroupFactory.php
================================================
<?php

namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Model>
 */
class PermissionGroupFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition(): array
    {
        return [
            //
        ];
    }
}


================================================
FILE: database/factories/TeamFactory.php
================================================
<?php

namespace Database\Factories;

use App\Models\User;
use Illuminate\Database\Eloquent\Factories\Factory;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Team>
 */
class TeamFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition(): array
    {
        return [
            'name' => $this->faker->unique()->company(),
            'user_id' => User::factory(),
            'personal_team' => true,
        ];
    }
}


================================================
FILE: database/factories/UserFactory.php
================================================
<?php

namespace Database\Factories;

use App\Models\Team;
use App\Models\User;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Str;
use Laravel\Jetstream\Features;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\User>
 */
class UserFactory extends Factory
{
    /**
     * The current password being used by the factory.
     */
    protected static ?string $password;

    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition(): array
    {
        return [
            'name' => fake()->name(),
            'email' => fake()->unique()->safeEmail(),
            'email_verified_at' => now(),
            'password' => static::$password ??= Hash::make('password'),
            'two_factor_secret' => null,
            'two_factor_recovery_codes' => null,
            'remember_token' => Str::random(10),
            'profile_photo_path' => null,
            'current_team_id' => null,
            'language' => 'en',
            'dark_mode' => 'auto',
            'theme' => 'anemon',
        ];
    }

    /**
     * Indicate that the model's email address should be unverified.
     */
    public function unverified(): static
    {
        return $this->state(fn (array $attributes) => [
            'email_verified_at' => null,
        ]);
    }

    /**
     * Indicate that the user should have a personal team.
     */
    public function withPersonalTeam(callable $callback = null): static
    {
        if (! Features::hasTeamFeatures()) {
            return $this->state([]);
        }

        return $this->has(
            Team::factory()
                ->state(fn (array $attributes, User $user) => [
                    'name' => $user->name.'\'s Team',
                    'user_id' => $user->id,
                    'personal_team' => true,
                ])
                ->when(is_callable($callback), $callback),
            'ownedTeams'
        );
    }
}


================================================
FILE: database/migrations/0001_01_01_000000_create_users_table.php
================================================
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->foreignId('current_team_id')->nullable();
            $table->string('profile_photo_path', 2048)->nullable();
            $table->timestamps();
        });

        Schema::create('password_reset_tokens', function (Blueprint $table) {
            $table->string('email')->primary();
            $table->string('token');
            $table->timestamp('created_at')->nullable();
        });

        Schema::create('sessions', function (Blueprint $table) {
            $table->string('id')->primary();
            $table->foreignId('user_id')->nullable()->index();
            $table->string('ip_address', 45)->nullable();
            $table->text('user_agent')->nullable();
            $table->longText('payload');
            $table->integer('last_activity')->index();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('users');
        Schema::dropIfExists('password_reset_tokens');
        Schema::dropIfExists('sessions');
    }
};


================================================
FILE: database/migrations/0001_01_01_000001_create_cache_table.php
================================================
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('cache', function (Blueprint $table) {
            $table->string('key')->primary();
            $table->mediumText('value');
            $table->integer('expiration');
        });

        Schema::create('cache_locks', function (Blueprint $table) {
            $table->string('key')->primary();
            $table->string('owner');
            $table->integer('expiration');
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('cache');
        Schema::dropIfExists('cache_locks');
    }
};


================================================
FILE: database/migrations/0001_01_01_000002_create_jobs_table.php
================================================
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('jobs', function (Blueprint $table) {
            $table->id();
            $table->string('queue')->index();
            $table->longText('payload');
            $table->unsignedTinyInteger('attempts');
            $table->unsignedInteger('reserved_at')->nullable();
            $table->unsignedInteger('available_at');
            $table->unsignedInteger('created_at');
        });

        Schema::create('job_batches', function (Blueprint $table) {
            $table->string('id')->primary();
            $table->string('name');
            $table->integer('total_jobs');
            $table->integer('pending_jobs');
            $table->integer('failed_jobs');
            $table->longText('failed_job_ids');
            $table->mediumText('options')->nullable();
            $table->integer('cancelled_at')->nullable();
            $table->integer('created_at');
            $table->integer('finished_at')->nullable();
        });

        Schema::create('failed_jobs', function (Blueprint $table) {
            $table->id();
            $table->string('uuid')->unique();
            $table->text('connection');
            $table->text('queue');
            $table->longText('payload');
            $table->longText('exception');
            $table->timestamp('failed_at')->useCurrent();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('jobs');
        Schema::dropIfExists('job_batches');
        Schema::dropIfExists('failed_jobs');
    }
};


================================================
FILE: database/migrations/2021_07_16_121843_create_permission_tables.php
================================================
<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        $teams = config('permission.teams');
        $tableNames = config('permission.table_names');
        $columnNames = config('permission.column_names');
        $pivotRole = $columnNames['role_pivot_key'] ?? 'role_id';
        $pivotPermission = $columnNames['permission_pivot_key'] ?? 'permission_id';

        if (empty($tableNames)) {
            throw new \Exception('Error: config/permission.php not loaded. Run [php artisan config:clear] and try again.');
        }
        if ($teams && empty($columnNames['team_foreign_key'] ?? null)) {
            throw new \Exception('Error: team_foreign_key on config/permission.php not loaded. Run [php artisan config:clear] and try again.');
        }

        Schema::create($tableNames['permissions'], function (Blueprint $table) {
            //$table->engine('InnoDB');
            $table->bigIncrements('id'); // permission id
            $table->string('name');       // For MyISAM use string('name', 225); // (or 166 for InnoDB with Redundant/Compact row format)
            $table->string('guard_name'); // For MyISAM use string('guard_name', 25);
            $table->timestamps();

            $table->unique(['name', 'guard_name']);
        });

        Schema::create($tableNames['roles'], function (Blueprint $table) use ($teams, $columnNames) {
            //$table->engine('InnoDB');
            $table->bigIncrements('id'); // role id
            if ($teams || config('permission.testing')) { // permission.testing is a fix for sqlite testing
                $table->unsignedBigInteger($columnNames['team_foreign_key'])->nullable();
                $table->index($columnNames['team_foreign_key'], 'roles_team_foreign_key_index');
            }
            $table->string('name');       // For MyISAM use string('name', 225); // (or 166 for InnoDB with Redundant/Compact row format)
            $table->string('guard_name'); // For MyISAM use string('guard_name', 25);
            $table->timestamps();
            if ($teams || config('permission.testing')) {
                $table->unique([$columnNames['team_foreign_key'], 'name', 'guard_name']);
            } else {
                $table->unique(['name', 'guard_name']);
            }
        });

        Schema::create($tableNames['model_has_permissions'], function (Blueprint $table) use ($tableNames, $columnNames, $pivotPermission, $teams) {
            $table->unsignedBigInteger($pivotPermission);

            $table->string('model_type');
            $table->unsignedBigInteger($columnNames['model_morph_key']);
            $table->index([$columnNames['model_morph_key'], 'model_type'], 'model_has_permissions_model_id_model_type_index');

            $table->foreign($pivotPermission)
                ->references('id') // permission id
                ->on($tableNames['permissions'])
                ->onDelete('cascade');
            if ($teams) {
                $table->unsignedBigInteger($columnNames['team_foreign_key']);
                $table->index($columnNames['team_foreign_key'], 'model_has_permissions_team_foreign_key_index');

                $table->primary([$columnNames['team_foreign_key'], $pivotPermission, $columnNames['model_morph_key'], 'model_type'],
                    'model_has_permissions_permission_model_type_primary');
            } else {
                $table->primary([$pivotPermission, $columnNames['model_morph_key'], 'model_type'],
                    'model_has_permissions_permission_model_type_primary');
            }

        });

        Schema::create($tableNames['model_has_roles'], function (Blueprint $table) use ($tableNames, $columnNames, $pivotRole, $teams) {
            $table->unsignedBigInteger($pivotRole);

            $table->string('model_type');
            $table->unsignedBigInteger($columnNames['model_morph_key']);
            $table->index([$columnNames['model_morph_key'], 'model_type'], 'model_has_roles_model_id_model_type_index');

            $table->foreign($pivotRole)
                ->references('id') // role id
                ->on($tableNames['roles'])
                ->onDelete('cascade');
            if ($teams) {
                $table->unsignedBigInteger($columnNames['team_foreign_key']);
                $table->index($columnNames['team_foreign_key'], 'model_has_roles_team_foreign_key_index');

                $table->primary([$columnNames['team_foreign_key'], $pivotRole, $columnNames['model_morph_key'], 'model_type'],
                    'model_has_roles_role_model_type_primary');
            } else {
                $table->primary([$pivotRole, $columnNames['model_morph_key'], 'model_type'],
                    'model_has_roles_role_model_type_primary');
            }
        });

        Schema::create($tableNames['role_has_permissions'], function (Blueprint $table) use ($tableNames, $pivotRole, $pivotPermission) {
            $table->unsignedBigInteger($pivotPermission);
            $table->unsignedBigInteger($pivotRole);

            $table->foreign($pivotPermission)
                ->references('id') // permission id
                ->on($tableNames['permissions'])
                ->onDelete('cascade');

            $table->foreign($pivotRole)
                ->references('id') // role id
                ->on($tableNames['roles'])
                ->onDelete('cascade');

            $table->primary([$pivotPermission, $pivotRole], 'role_has_permissions_permission_id_role_id_primary');
        });

        app('cache')
            ->store(config('permission.cache.store') != 'default' ? config('permission.cache.store') : null)
            ->forget(config('permission.cache.key'));
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        $tableNames = config('permission.table_names');

        if (empty($tableNames)) {
            throw new \Exception('Error: config/permission.php not found and defaults could not be merged. Please publish the package configuration before proceeding, or drop the tables manually.');
        }

        Schema::drop($tableNames['role_has_permissions']);
        Schema::drop($tableNames['model_has_roles']);
        Schema::drop($tableNames['model_has_permissions']);
        Schema::drop($tableNames['roles']);
        Schema::drop($tableNames['permissions']);
    }
};


================================================
FILE: database/migrations/2021_11_10_062603_create_demo_contents_table.php
================================================
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateDemoContentsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up(): void
    {
        Schema::create('demo_contents', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('type');
            $table->double('price');
            $table->foreignId('main_product_id')->nullable();
            $table->date('production_date');
            $table->boolean('status')->default(true);
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down(): void
    {
        Schema::dropIfExists('demo_contents');
    }
}


================================================
FILE: database/migrations/2022_01_20_204151_add_group_columns_to_permissions_table.php
================================================
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddGroupColumnsToPermissionsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up(): void
    {
        Schema::table('permissions', function (Blueprint $table) {
            $table->foreignIdFor(\App\Models\PermissionGroup::class)
                ->after('guard_name')
                ->nullable();

            $table->string('description')
                ->after('name')
                ->nullable();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down(): void
    {
        Schema::table('permissions', function (Blueprint $table) {
            $table->dropForeign(['permission_group_id']);
            $table->dropColumn('permission_group_id');
            $table->dropColumn('description');
        });
    }
}


================================================
FILE: database/migrations/2022_01_20_204743_create_permission_groups_table.php
================================================
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePermissionGroupsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up(): void
    {
        Schema::create('permission_groups', function (Blueprint $table) {
            $table->id();
            $table->string('name',100);
            $table->string('description',250)->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down(): void
    {
        Schema::dropIfExists('permission_groups');
    }
}


================================================
FILE: database/migrations/2024_07_03_194214_add_two_factor_columns_to_users_table.php
================================================
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::table('users', function (Blueprint $table) {
            $table->text('two_factor_secret')
                ->after('password')
                ->nullable();

            $table->text('two_factor_recovery_codes')
                ->after('two_factor_secret')
                ->nullable();

            $table->timestamp('two_factor_confirmed_at')
                ->after('two_factor_recovery_codes')
                ->nullable();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::table('users', function (Blueprint $table) {
            $table->dropColumn([
                'two_factor_secret',
                'two_factor_recovery_codes',
                'two_factor_confirmed_at',
            ]);
        });
    }
};


================================================
FILE: database/migrations/2024_07_03_194232_create_personal_access_tokens_table.php
================================================
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('personal_access_tokens', function (Blueprint $table) {
            $table->id();
            $table->morphs('tokenable');
            $table->text('name');
            $table->string('token', 64)->unique();
            $table->text('abilities')->nullable();
            $table->timestamp('last_used_at')->nullable();
            $table->timestamp('expires_at')->nullable()->index();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('personal_access_tokens');
    }
};


================================================
FILE: database/migrations/2024_07_03_194233_create_teams_table.php
================================================
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('teams', function (Blueprint $table) {
            $table->id();
            $table->foreignId('user_id')->index();
            $table->string('name');
            $table->boolean('personal_team');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('teams');
    }
};


================================================
FILE: database/migrations/2024_07_03_194234_create_team_user_table.php
================================================
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('team_user', function (Blueprint $table) {
            $table->id();
            $table->foreignId('team_id');
            $table->foreignId('user_id');
            $table->string('role')->nullable();
            $table->timestamps();

            $table->unique(['team_id', 'user_id']);
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('team_user');
    }
};


================================================
FILE: database/migrations/2024_07_03_194235_create_team_invitations_table.php
================================================
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('team_invitations', function (Blueprint $table) {
            $table->id();
            $table->foreignId('team_id')->constrained()->cascadeOnDelete();
            $table->string('email');
            $table->string('role')->nullable();
            $table->timestamps();

            $table->unique(['team_id', 'email']);
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('team_invitations');
    }
};


================================================
FILE: database/migrations/2024_07_07_190651_add_personalization_fields_to_users_table.php
================================================
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration {
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('language')
                ->default('en')
                ->after('profile_photo_path');
            $table->string('dark_mode')
                ->default('auto')
                ->after('language');
            $table->string('theme')
                ->default('anemon')
                ->after('dark_mode');
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::table('users', function (Blueprint $table) {
            //
        });
    }
};


================================================
FILE: database/seeders/DatabaseSeeder.php
================================================
<?php

namespace Database\Seeders;

use App\Models\User;

// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     */
    public function run(): void
    {
        $this->call([
            PermissionSeeder::class,
            RoleSeeder::class,
            UserSeeder::class
        ]);
        \App\Models\User::factory(50)->create();
        \App\Models\DemoContent::factory(100)->create();

    }
}


================================================
FILE: database/seeders/PermissionGroupSeeder.php
================================================
<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class PermissionGroupSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        //
    }
}


================================================
FILE: database/seeders/PermissionSeeder.php
================================================
<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Spatie\Permission\Models\Permission;

class PermissionSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        $permissions = ['create', 'edit-all', 'delete-all', 'view-all', 'edit-own', 'delete-own', 'view-own'];

        foreach ($permissions as $permission) {
            Permission::create([
                'name' => $permission
            ]);
        }

    }
}


================================================
FILE: database/seeders/RoleSeeder.php
================================================
<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Spatie\Permission\Models\Role;

class RoleSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        /*Super Admin*/
        Role::create(
            ['name' => 'Super Admin']
        );

        /*Editor*/
        $editor = Role::create(
            ['name' => 'Editor'],
        );

        /*Simple User*/
        $simpleUser = Role::create(
            ['name' => 'Simple User'],
        );

        /*Assign Permission*/
        $editor->givePermissionTo(['create', 'edit-all', 'delete-all', 'view-all']);
        $simpleUser->givePermissionTo(['create', 'edit-own', 'delete-own', 'view-own']);
    }
}


================================================
FILE: database/seeders/UserSeeder.php
================================================
<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use App\Models\User;
use App\Actions\Fortify\CreateNewUser;

class UserSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        /*Admin*/
        $admin = User::factory()->withPersonalTeam()->create([
            'name' => 'Super Admin',
            'email' => 'admin@tailadmin.dev',
            'password' => bcrypt('admin'),
        ]);

        /*Editor*/
        $editor = User::factory()->withPersonalTeam()->create([
            'name' => 'Editor',
            'email' => 'editor@tailadmin.dev',
            'password' => bcrypt('editor'),
        ]);

        /*Simple User*/
        $simpleUser = User::factory()->withPersonalTeam()->create([
            'name' => 'Super User',
            'email' => 'user@tailadmin.dev',
            'password' => bcrypt('user'),
        ]);

        /*Assign Role*/
        $admin->assignRole('Super Admin');
        $editor->assignRole('Editor');
        $simpleUser->assignRole('Simple User');
    }
}


================================================
FILE: eslint.config.js
================================================
/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
    {
        files: [
            "./resources/js/**/*.js",
            "./resources/js/**/*.ts"
        ],
        extends: [
            // add more generic rulesets here, such as:
            "eslint:recommended",
            //'plugin:vue/vue3-recommended',
            // 'plugin:vue/vue3-essential', // This option doesn't impose formatting rules
            "plugin:vue/vue3-strongly-recommended", // This option imposes formatting rules on your code to improve readability
            "prettier"
            // Make sure "prettier" is the last element in this list.
        ],
        rules: {
            // override/add rules settings here, such as:
            // 'vue/no-unused-vars': 'error'
        }
    }
];


================================================
FILE: jsconfig.json
================================================
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["resources/js/*"]
        }
    },
    "exclude": ["node_modules", "public"]
}


================================================
FILE: package.json
================================================
{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build && vite build --ssr"
    },
    "devDependencies": {
        "@inertiajs/vue3": "^2.0",
        "@tailwindcss/forms": "^0.5.7",
        "@tailwindcss/typography": "^0.5.10",
        "@types/eslint": "^8.56.10",
        "@vitejs/plugin-vue": "^6.0.0",
        "@vue/server-renderer": "^3.5.21",
        "autoprefixer": "^10.4.19",
        "axios": "^1.11.0",
        "concurrently": "^9.0.1",
        "eslint": "^9.6.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-vue": "^9.27.0",
        "laravel-vite-plugin": "^2.0.0",
        "postcss": "^8.4.39",
        "prettier": "^3.3.2",
        "sass": "^1.77.6",
        "tailwind-scrollbar": "^3.1.0",
        "tailwindcss": "^3.4.0",
        "vite": "^7.1.6",
        "vue": "^3.5.21"
    },
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^7.0.1",
        "@fortawesome/free-brands-svg-icons": "^7.0.1",
        "@fortawesome/free-regular-svg-icons": "^7.0.1",
        "@fortawesome/free-solid-svg-icons": "^7.0.1",
        "@fortawesome/vue-fontawesome": "^3.1.2",
        "@vuelidate/core": "^2.0.3",
        "@vuelidate/validators": "^2.0.4",
        "@vueuse/core": "^13.9.0",
        "chart.js": "^4.4.3",
        "highlight.js": "^11.9.0",
        "lodash": "^4.17.21",
        "nprogress": "^0.2.0",
        "pinia": "^3.0.3",
        "simple-syntax-highlighter": "^3.0.2",
        "v-calendar": "^3.1.2",
        "vue-chartjs": "^5.3.1",
        "vue-i18n": "^11.1.12",
        "vue3-highlightjs": "^1.0.5",
        "vue3-keypress": "^4.0.1"
    }
}


================================================
FILE: phpunit.xml
================================================
<?xml version="1.0" encoding="UTF-8"?>
<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="vendor/phpunit/phpunit/phpunit.xsd"
         bootstrap="vendor/autoload.php"
         colors="true"
>
    <testsuites>
        <testsuite name="Unit">
            <directory>tests/Unit</directory>
        </testsuite>
        <testsuite name="Feature">
            <directory>tests/Feature</directory>
        </testsuite>
    </testsuites>
    <source>
        <include>
            <directory>app</directory>
        </include>
    </source>
    <php>
        <env name="APP_ENV" value="testing"/>
        <env name="APP_MAINTENANCE_DRIVER" value="file"/>
        <env name="BCRYPT_ROUNDS" value="4"/>
        <env name="CACHE_STORE" value="array"/>
        <!-- <env name="DB_CONNECTION" value="sqlite"/>
        <env name="DB_DATABASE" value=":memory:"/> -->
        <env name="MAIL_MAILER" value="array"/>
        <env name="QUEUE_CONNECTION" value="sync"/>
        <env name="SESSION_DRIVER" value="array"/>
        <env name="PULSE_ENABLED" value="false"/>
        <env name="TELESCOPE_ENABLED" value="false"/>
        <env name="NIGHTWATCH_ENABLED" value="false"/>
    </php>
</phpunit>


================================================
FILE: postcss.config.js
================================================
export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};


================================================
FILE: public/.htaccess
================================================
<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Handle X-XSRF-Token Header
    RewriteCond %{HTTP:x-xsrf-token} .
    RewriteRule .* - [E=HTTP_X_XSRF_TOKEN:%{HTTP:X-XSRF-Token}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>


================================================
FILE: public/index.php
================================================
<?php

use Illuminate\Foundation\Application;
use Illuminate\Http\Request;

define('LARAVEL_START', microtime(true));

// Determine if the application is in maintenance mode...
if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
    require $maintenance;
}

// Register the Composer autoloader...
require __DIR__.'/../vendor/autoload.php';

// Bootstrap Laravel and handle the request...
/** @var Application $app */
$app = require_once __DIR__.'/../bootstrap/app.php';

$app->handleRequest(Request::capture());


================================================
FILE: public/robots.txt
================================================
User-agent: *
Disallow:


================================================
FILE: resources/css/app.css
================================================
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/*Components*/
@import "./components/auth.css";
@import "./components/alert.css";
@import "./components/avatar.css";
@import "./components/badge.css";
@import "./components/breadcrumb.css";
@import "./components/button.css";
@import "./components/collapsible.css";
@import "./components/content-box.css";
@import "./components/dropdown.css";
@import "./components/grid.css";
@import "./components/loading.css";
@import "./components/list.css";
@import "./components/modal.css";
@import "./components/radius.css";
@import "./components/pagination.css";
@import "./components/progress.css";
@import "./components/tab.css";
@import "./components/table.css";
@import "./components/toastr.css";
@import "./components/tooltip.css";
@import "./components/statistic-box.css";
@import "./components/backEndTablePagination.css";
@import "./components/input.css";
@import "./components/vertical-menu.css";

/*Layouts*/
@import "./layout/main.css";
@import "./layout/full-screen-layout.css";
@import "./layout/top-bar.css";
@import "./layout/main-menu.css";
@import "./layout/footer.css";

/* Miscs */
@import "./misc/effect.css";
@import "./misc/highlighter.css";

[x-cloak] {
    display: none;
}


================================================
FILE: resources/css/components/alert.css
================================================
.alert {
    @apply flex flex-shrink-0 items-center justify-start relative w-full flex-grow-0
}

.alert-content {
    @apply flex flex-col justify-center items-start flex-grow py-2 px-4 whitespace-pre-line
}

.alert-title {
    @apply font-bold text-lg
}

.alert-close {
    @apply hover:text-red-500 cursor-pointer mr-2
}

.alert-icon {
    @apply flex flex-shrink-0 justify-center items-center
}

.alert-countdown {
    @apply absolute justify-center items-center bottom-0 left-0 h-[.3rem] px-2 w-full
}

.alert-countdown-line {
    @apply h-[.3rem] mx-auto
}

/*<editor-fold desc="Filled Style">*/
/*General Definitions*/
.alert-filled {
    @apply text-white py-1 px-4
}

/*Colors: success, danger, warning, info, light, dark, violet*/
/*Success*/
.alert-filled-success{
    @apply bg-emerald-500
}

.alert-filled-success .alert-countdown-line {
    @apply bg-emerald-700
}

/*Danger*/
.alert-filled-danger{
    @apply bg-rose-500
}

.alert-filled-danger .alert-countdown-line {
    @apply bg-rose-700
}

/*Warning*/
.alert-filled-warning{
    @apply bg-amber-500
}

.alert-filled-warning .alert-countdown-line {
    @apply bg-amber-700
}

/*Info*/
.alert-filled-info{
    @apply bg-sky-500
}

.alert-filled-info .alert-countdown-line {
    @apply bg-sky-700
}

/*Light*/
.alert-filled-light{
    @apply bg-slate-300 text-slate-600
}

.alert-filled-light .alert-countdown-line {
    @apply bg-slate-500
}

/*Dark*/
.alert-filled-dark{
    @apply bg-slate-800
}

.alert-filled-dark .alert-countdown-line {
    @apply bg-slate-500
}

/*Violet*/
.alert-filled-violet{
    @apply bg-violet-500
}

.alert-filled-violet .alert-countdown-line {
    @apply bg-violet-700
}

/*</editor-fold>*/

/*<editor-fold desc="Light Style">*/
/*General Definitions*/
.alert-light {
    @apply border py-1 px-4
}

/*Colors: success, danger, warning, info, light, dark, violet*/
/*Success*/
.alert-light-success{
    @apply bg-emerald-50 border-emerald-500 text-emerald-600 dark:bg-emerald-100/80
}

.alert-light-success .alert-countdown-line {
    @apply bg-emerald-500
}

/*Danger*/
.alert-light-danger{
    @apply bg-rose-50 border-rose-500 text-rose-600 dark:bg-rose-700/10 dark:text-rose-100
}

.alert-light-danger .alert-countdown-line {
    @apply bg-rose-500
}

/*Warning*/
.alert-light-warning{
    @apply bg-amber-50 border-amber-500 text-amber-600 dark:bg-amber-700/10 dark:text-amber-100
}

.alert-light-warning .alert-countdown-line {
    @apply bg-amber-500
}

/*Info*/
.alert-light-info{
    @apply bg-sky-50 border-sky-500 text-sky-600 dark:bg-sky-700/10 dark:text-sky-100
}

.alert-light-info .alert-countdown-line {
    @apply bg-sky-500
}

/*Light*/
.alert-light-light{
    @apply bg-slate-50 border-slate-500 text-slate-600 dark:bg-slate-700/10 dark:text-slate-100
}

.alert-light-light .alert-countdown-line {
    @apply bg-slate-500
}

/*Dark*/
.alert-light-dark{
    @apply bg-slate-400 border-slate-600 text-slate-800 dark:border-slate-800 dark:bg-slate-700 dark:text-slate-100
}

.alert-light-dark .alert-countdown-line {
    @apply bg-slate-600
}

/*Violet*/
.alert-light-violet{
    @apply bg-violet-50 border-violet-500 text-violet-600 dark:bg-violet-700/10 dark:text-violet-100
}

.alert-light-violet .alert-countdown-line {
    @apply bg-violet-500
}

/*</editor-fold>*/

/*<editor-fold desc="Inline Style">*/
/*General Definitions*/
.alert-inline {
    @apply border py-1 pl-6 pr-4 text-white
}

.alert-inline .alert-icon{
    @apply -mr-2
}

.alert-inline .alert-line {
    @apply absolute h-[80%] w-1.5 left-2 rounded-full flex-shrink-0 after:content-['\00a0']
}

/*Colors: success, danger, warning, info, light, dark, violet*/
/*Success*/
.alert-inline-success{
    @apply bg-emerald-500 border-emerald-500 dark:bg-emerald-500/30
}

.alert-inline-success .alert-line, .alert-inline-success .alert-countdown-line {
    @apply bg-emerald-50
}

/*Danger*/
.alert-inline-danger{
    @apply bg-rose-500 border-rose-500 dark:bg-rose-500/30
}

.alert-inline-danger .alert-line, .alert-inline-danger .alert-countdown-line{
    @apply bg-rose-50
}

/*Warning*/
.alert-inline-warning{
    @apply bg-amber-500 border-amber-500 dark:bg-amber-500/30
}

.alert-inline-warning .alert-line, .alert-inline-warning .alert-countdown-line {
    @apply bg-amber-50
}

/*Info*/
.alert-inline-info{
    @apply bg-sky-500 border-sky-500 dark:bg-sky-500/30
}

.alert-inline-info .alert-line, .alert-inline-info .alert-countdown-line  {
    @apply bg-sky-50
}

/*Light*/
.alert-inline-light{
    @apply bg-slate-200 text-slate-600 dark:text-slate-100 border-slate-500 dark:border-slate-100 dark:bg-slate-500/30
}

.alert-inline-light .alert-line, .alert-inline-light .alert-countdown-line {
    @apply bg-slate-500 dark:bg-slate-100
}

/*Dark*/
.alert-inline-dark{
    @apply bg-slate-800 border-slate-800 dark:bg-slate-800/50
}

.alert-inline-dark .alert-line, .alert-inline-dark .alert-countdown-line {
    @apply bg-slate-50
}

/*Violet*/
.alert-inline-violet{
    @apply bg-violet-500 border-violet-500 dark:bg-violet-500/30
}

.alert-inline-violet .alert-line, .alert-inline-violet .alert-countdown-line {
    @apply bg-violet-50
}

/*</editor-fold>*/

/*<editor-fold desc="Outline Style">*/
.alert-outline {
    @apply  flex shadow px-4 text-gray-700 bg-white dark:bg-slate-800 dark:text-white overflow-hidden
}

.alert-outline .alert-content{
    @apply pl-2 pr-4 py-3
}

.alert-outline .alert-line {
    @apply absolute w-1.5 h-full left-0 flex-shrink-0 mr-4 before:content-['\00a0']
}

/*Colors: success, danger, warning, info, light, dark, violet*/
/*Success*/
.alert-outline-success .alert-icon{
    @apply text-emerald-500
}

.alert-outline-success .alert-line, .alert-outline-success .alert-countdown-line {
    @apply bg-emerald-500
}

/*Danger*/
.alert-outline-danger .alert-icon{
    @apply text-rose-500
}

.alert-outline-danger .alert-line, .alert-outline-danger .alert-countdown-line{
    @apply bg-rose-500
}

/*Warning*/
.alert-outline-warning .alert-icon{
    @apply text-amber-500
}

.alert-outline-warning .alert-line, .alert-outline-warning .alert-countdown-line {
    @apply bg-amber-500
}

/*Info*/
.alert-outline-info .alert-icon{
    @apply text-sky-500
}

.alert-outline-info .alert-line, .alert-outline-info .alert-countdown-line  {
    @apply bg-sky-500
}

/*Light*/
.alert-outline-light .alert-icon{
    @apply text-slate-500
}

.alert-outline-light .alert-line, .alert-outline-light .alert-countdown-line {
    @apply bg-slate-500
}

/*Dark*/
.alert-outline-dark .alert-icon{
    @apply text-slate-800 dark:text-slate-900
}

.alert-outline-dark .alert-line, .alert-outline-dark .alert-countdown-line {
    @apply bg-slate-900
}

/*Violet*/
.alert-outline-violet .alert-icon{
    @apply text-violet-500
}

.alert-outline-violet .alert-line, .alert-outline-violet .alert-countdown-line {
    @apply bg-violet-500
}

/*</editor-fold>*/

/*<editor-fold desc="Elegant Style">*/
/*General Definitions*/
.alert-elegant {
    @apply flex flex-row justify-start items-center py-1 px-4 shadow text-gray-700 bg-white dark:bg-slate-800 dark:text-white overflow-hidden
}

.alert-elegant .alert-content{
    @apply flex flex-row justify-start items-center
}

.alert-elegant .alert-title {
    @apply rounded-full border -ml-4 mr-4 px-2 leading-5 text-2xs font-normal
}

/*Colors: success, danger, warning, info, light, dark, violet*/
/*Success*/
.alert-elegant-success .alert-title{
    @apply text-emerald-600 bg-emerald-50 border-emerald-500 dark:bg-emerald-700/10 dark:text-emerald-100
}
.alert-elegant-success .alert-countdown-line {
    @apply bg-emerald-500
}

/*Danger*/
.alert-elegant-danger .alert-title{
    @apply text-rose-500 bg-rose-50 border-rose-500 dark:bg-rose-700/10 dark:text-rose-100
}
.alert-elegant-danger .alert-countdown-line{
    @apply bg-rose-500
}

/*Warning*/
.alert-elegant-warning .alert-title{
    @apply text-amber-500 bg-amber-50 border-amber-500 dark:bg-amber-700/10 dark:text-amber-100
}
.alert-elegant-warning .alert-countdown-line {
    @apply bg-amber-500
}

/*Info*/
.alert-elegant-info .alert-title{
    @apply text-sky-500 bg-sky-50 border-sky-500 dark:bg-sky-700/10 dark:text-sky-100
}
.alert-elegant-info .alert-countdown-line  {
    @apply bg-sky-500
}

/*Light*/
.alert-elegant-light .alert-title{
    @apply text-slate-500 bg-slate-50 border-slate-500 dark:bg-slate-700/10 dark:text-slate-100
}
.alert-elegant-light .alert-countdown-line {
    @apply bg-slate-500
}

/*Dark*/
.alert-elegant-dark .alert-title{
    @apply text-slate-800 bg-slate-400 border-slate-500  dark:border-slate-900 dark:bg-slate-700/50 dark:text-slate-100
}

.alert-elegant-dark .alert-countdown-line {
    @apply bg-slate-50
}

/*Violet*/
.alert-elegant-violet .alert-title{
    @apply text-violet-500 bg-violet-50 border-violet-500 dark:bg-violet-700/10 dark:text-violet-100
}
.alert-elegant-violet .alert-countdown-line {
    @apply bg-violet-500
}

/*</editor-fold>*/

/*<editor-fold desc="Block Style">*/
/*General Definitions*/
.alert-block {
    @apply shadow pl-1 pr-4 text-gray-700 bg-white dark:bg-slate-800 dark:text-white overflow-hidden
}

.alert-block .alert-content{
    @apply py-3 ml-12 pr-4
}

.alert-block .alert-icon {
    @apply absolute h-full px-5 border-r-4 left-0
}

.alert-block-base #countdown {
    @apply h-1 rounded-full mx-auto
}

/*Colors: success, danger, warning, info, light, dark, violet*/
/*Success*/
.alert-block-success .alert-icon{
    @apply text-emerald-600 bg-emerald-200 border-emerald-500 dark:bg-emerald-500 dark:border-emerald-700 dark:text-emerald-50
}
.alert-block-success .alert-countdown-line {
    @apply bg-emerald-500
}

/*Danger*/
.alert-block-danger .alert-icon{
    @apply text-rose-500 bg-rose-200 border-rose-500 dark:bg-rose-500 dark:border-rose-700 dark:text-rose-50
}
.alert-block-danger .alert-countdown-line{
    @apply bg-rose-500
}

/*Warning*/
.alert-block-warning .alert-icon{
    @apply text-amber-500 bg-amber-200 border-amber-500 dark:bg-amber-500 dark:border-amber-700 dark:text-amber-50
}
.alert-block-warning .alert-countdown-line {
    @apply bg-amber-500
}

/*Info*/
.alert-block-info .alert-icon{
    @apply text-sky-500 bg-sky-200 border-sky-500 dark:bg-sky-500 dark:border-sky-700 dark:text-sky-50
}
.alert-block-info .alert-countdown-line  {
    @apply bg-sky-500
}

/*Light*/
.alert-block-light .alert-icon{
    @apply text-slate-500 bg-slate-200 border-slate-500 dark:bg-slate-500 dark:border-slate-700 dark:text-slate-50
}
.alert-block-light .alert-countdown-line {
    @apply bg-slate-500
}

/*Dark*/
.alert-block-dark .alert-icon{
    @apply text-slate-100 bg-slate-500 border-slate-700  dark:bg-slate-900 dark:border-slate-700 dark:text-slate-50
}

.alert-block-dark .alert-countdown-line {
    @apply bg-slate-50
}

/*Violet*/
.alert-block-violet .alert-icon{
    @apply text-violet-500 bg-violet-200 border-violet-500 dark:bg-violet-500 dark:border-violet-700 dark:text-violet-50
}
.alert-block-violet .alert-countdown-line {
    @apply bg-violet-500
}

/*</editor-fold>*/

/*<editor-fold desc="Gradient Style">*/
/*General Definitions*/
.alert-gradient {
    @apply py-1 px-4
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Rose*/
.alert-gradient-rose {
    @apply text-gray-600;
    text-shadow: #ffafbd .05rem .05rem;
    background: linear-gradient(90deg, rgba(255, 175, 189, 1) 0%, rgba(255, 195, 160, 1) 100%);
}

.alert-gradient-rose .alert-countdown-line {
    background-color: rgba(255, 235, 239, 1);
}

/*Sky*/
.alert-gradient-sky {
    @apply text-gray-100;
    text-shadow: #2193b0 .05rem .05rem;
    background: linear-gradient(90deg, rgba(33, 147, 176, 1) 0%, rgba(109, 213, 237, 1) 100%);
}

.alert-gradient-sky .alert-countdown-line {
    background-color: rgba(183, 237, 250, 1);
}

/*Fuchsia*/
.alert-gradient-fuchsia {
    @apply text-gray-100;
    text-shadow: #cc2b5e .05rem .05rem;
    background: linear-gradient(90deg, rgba(204, 43, 94, 1) 0%, rgba(117, 58, 136, 1) 100%);
}

.alert-gradient-fuchsia .alert-countdown-line {
    background-color: rgba(252, 156, 187, 1);
}

/*Violet*/
.alert-gradient-violet {
    @apply text-gray-100;
    text-shadow: #42275a .05rem .05rem;
    background: linear-gradient(90deg, rgba(66, 39, 90, 1) 0%, rgba(115, 75, 109, 1) 100%);
}

.alert-gradient-violet .alert-countdown-line {
    background-color: rgba(207, 171, 240, 1);
}

/*Cloud*/
.alert-gradient-cloud {
    @apply text-gray-100;
    text-shadow: #bdc3c7 .05rem .05rem;
    background: linear-gradient(90deg, rgba(44, 62, 80, 1) 0%, rgba(189, 195, 199, 1) 100%);
}

.alert-gradient-cloud .alert-countdown-line {
    background-color: rgba(179, 195, 210, 1);
}

/*Turquoise*/
.alert-gradient-turquoise {
    @apply text-gray-100;
    text-shadow: #06beb6 .05rem .05rem;
    background: linear-gradient(90deg, rgba(6, 190, 182, 1) 0%, rgba(72, 177, 191, 1) 100%);
}

.alert-gradient-turquoise .alert-countdown-line {
    background-color: rgba(168, 247, 244, 1);
}

/*Caterpillar*/
.alert-gradient-caterpillar {
    @apply text-gray-100;
    text-shadow: #2193b0 .05rem .05rem;
    background: linear-gradient(90deg, rgba(86, 171, 47, 1) 0%, rgba(168, 224, 99, 1) 100%);
}

.alert-gradient-caterpillar .alert-countdown-line {
    background-color: rgba(208, 245, 192, 1);
}

/*Biscuit*/
.alert-gradient-biscuit {
    @apply text-gray-100;
    text-shadow: #d76d77 .05rem .05rem;
    background: linear-gradient(90deg, rgba(58, 28, 113, 1) 0%, rgba(215, 109, 119, 1) 50%, rgba(255, 175, 123, 1) 100%);
}

.alert-gradient-biscuit .alert-countdown-line {
    background-color: rgba(219, 205, 245, 1);
}

/*Dream*/
.alert-gradient-dream {
    @apply text-gray-100;
    text-shadow: #d76d77 .05rem .05rem;
    background: linear-gradient(90deg, rgba(105, 74, 101, 1) 0%, rgba(183, 121, 235, 1) 40%, rgba(125, 173, 249, 1) 80%, rgba(4, 189, 200, 1) 100%);
}

.alert-gradient-dream .alert-countdown-line {
    background-color: rgba(219, 205, 245, 1);
}

/*</editor-fold>*/


================================================
FILE: resources/css/components/auth.css
================================================
/*Auth*/
/*Auth Container*/
.auth-container {
    @apply flex flex-col border items-center justify-center shadow border-none w-96
}

/*Auth Header*/
.auth-header {
    @apply flex flex-col w-full justify-center items-center backdrop-filter backdrop-blur
}

/*Auth Logo*/
.auth-logo {
    @apply inline-flex py-4
}

/*Auth Greeting*/
.auth-greeting {
    @apply inline-flex justify-center w-full bg-gray-200 py-1 bg-opacity-20 w-full
}

/*Auth Status*/
.auth-status {
    @apply mb-4 font-medium text-sm text-green-600
}

/*Auth Form*/
.auth-form {
    @apply flex flex-col gap-4 bg-white dark:text-slate-100 dark:bg-slate-800 backdrop-filter backdrop-blur p-6 w-full
}

/*Auth Remember: Login*/
.auth-remember {
    @apply flex justify-between items-center mt-4 space-x-4
}

/*Auth Remember Text: Login*/
.auth-remember-text {
    @apply text-sm
}

/*Auth Forgot Password: Login*/
.auth-forgot-password {
    @apply underline text-sm
}

/*Auth Submit Area*/
.auth-submit-area {
    @apply flex items-center justify-between mt-4
}

/*Auth Error*/
.auth-error {
    @apply absolute w-full translate-y-1/2 mt-4 text-white
}

/*Auth Avatar Container: Lock*/
.auth-avatar-container {
    @apply absolute -mt-12 grid w-full justify-center
}

/*Auth Avatar Container: Lock*/
.auth-avatar {
    @apply border-4 rounded-full bg-gray-300 z-10
}

/*Auth Lock Form*/
.auth-lock-form {
    @apply flex flex-col gap-4 p-8 w-full
}

/*Auth Name*/
.auth-name {
    @apply text-xl text-center font-semibold pt-6 -mb-3
}


================================================
FILE: resources/css/components/avatar.css
================================================
.avatar-container {
    @apply relative z-0
}
.avatar-container-group {
    @apply -ml-4  hover:z-10
}
.avatar-group-container {
    @apply inline-flex flex-row-reverse ml-4
}
.avatar-group-image {
    @apply border-2 border-white border-opacity-75 hover:scale-150 transform
}
.avatar-indicator {
    @apply absolute flex flex-shrink-0 justify-center items-center w-1/3 h-1/3 rounded-full font-semibold
}

/*<editor-fold desc="Size Styles">*/
.avatar-size-1 {
    @apply w-5 h-5
}
.avatar-size-2 {
    @apply w-8 h-8
}
.avatar-size-3 {
    @apply w-10 h-10
}
.avatar-size-4 {
    @apply w-12 h-12
}
.avatar-size-5 {
    @apply w-16 h-16
}
.avatar-size-6 {
    @apply w-20 h-20
}
.avatar-size-7 {
    @apply w-24 h-24
}
.avatar-size-8 {
    @apply w-36 h-36
}
/*</editor-fold>*/

/*<editor-fold desc="Position Styles">*/
.avatar-indicator-position-lb {
    @apply -left-0.5 -bottom-0.5
}
.avatar-indicator-position-rb {
    @apply -right-0.5 -bottom-0.5
}
.avatar-indicator-position-lt {
    @apply -left-0.5 -top-0.5
}
.avatar-indicator-position-rt {
    @apply -right-0.5 -top-0.5
}
/*</editor-fold>*/

/*<editor-fold desc="Indicator Styles">*/
.avatar-indicator-info {
    @apply bg-sky-500 text-gray-100
}
.avatar-indicator-danger {
    @apply bg-rose-500 text-gray-100
}
.avatar-indicator-success {
    @apply bg-emerald-500 text-gray-100
}
.avatar-indicator-warning {
    @apply bg-amber-500 text-gray-100
}
.avatar-indicator-purple {
    @apply bg-purple-500 text-gray-100
}
.avatar-indicator-pink {
    @apply bg-pink-500 text-gray-100
}
.avatar-indicator-light {
    @apply bg-gray-500 text-gray-100
}
/*</editor-fold>*/


================================================
FILE: resources/css/components/backEndTablePagination.css
================================================
/*bet-pagination*/
/*bet-pagination Container*/
.bet-pagination-container {
    @apply flex flex-col-reverse my-2 md:flex-row md:mt-0 justify-center md:justify-between flex-shrink-0 w-full items-center ease-in-out duration-200 transition-all
}
/*bet-pagination Detail Text*/
.bet-pagination-detail-container{
    @apply flex flex-row flex-shrink-0 mt-2 md:mt-0 items-center space-x-2 select-none
}
.bet-pagination-detail-text{
    @apply flex flex-row flex-shrink-0
}
.bet-pagination-detail-jump-container{
    @apply relative flex items-center
}
.bet-pagination-detail-jump-input{
    @apply flex h-8 ml-2 px-0 text-center focus:ring-0
}
.bet-pagination-detail-jump-button{
    @apply flex text-sm items-center px-0.5 cursor-pointer h-8
}
.bet-pagination-counters {
    @apply inline-flex flex-shrink-0 justify-end items-center overflow-hidden ease-in-out duration-200 transition-all
}
/*bet-pagination Item*/
.bet-pagination-item {
    @apply flex items-center justify-center h-8 px-2 cursor-pointer font-semibold select-none flex-shrink-0 ease-in-out duration-200 transition-all
}
.bet-pagination-active-item {
    @apply flex items-center justify-center h-8 px-2 cursor-pointer font-semibold select-none flex-shrink-0 ease-in-out duration-200 transition-all
}
/*Left Right Navigation Arrows*/
.bet-pagination-arrow, .bet-pagination-passive-arrow  {
    @apply flex flex-shrink-0 items-center justify-center h-8 px-2 cursor-pointer font-semibold select-none
}
.bet-pagination-passive-arrow{
    @apply cursor-auto
}
.bet-pagination-arrow-text{
    @apply hidden md:block
}

/*Light*/
.bet-pagination-light .bet-pagination-item{
    @apply bg-white text-gray-700
}
.bet-pagination-light .bet-pagination-active-item{
    @apply bg-gray-700 text-white
}
.bet-pagination-light .bet-pagination-arrow{
    @apply bg-white text-gray-700
}
.bet-pagination-light .bet-pagination-passive-arrow{
    @apply bg-white text-gray-300
}
.bet-pagination-light .bet-pagination-detail-jump-button{
    @apply bg-white text-gray-700 border
}
.bet-pagination-light .bet-pagination-detail-jump-input{
    @apply bg-white text-gray-700 border border-r-0 border-gray-200
}


/*Dark*/
.bet-pagination-dark .bet-pagination-item{
    @apply bg-gray-700 text-white
}
.bet-pagination-dark .bet-pagination-active-item{
    @apply bg-gray-300 text-gray-700
}
.bet-pagination-dark .bet-pagination-arrow{
    @apply bg-gray-700 text-white
}
.bet-pagination-dark .bet-pagination-passive-arrow{
    @apply bg-gray-300 text-gray-600
}

.bet-pagination-dark .bet-pagination-detail-jump-button{
    @apply bg-gray-700 text-white
}
.bet-pagination-dark .bet-pagination-detail-jump-input{
    @apply bg-white text-gray-700
}


================================================
FILE: resources/css/components/badge.css
================================================
.badge {
    @apply flex relative flex-grow-0 flex-shrink-0 justify-center items-center whitespace-nowrap select-none overflow-hidden max-w-min max-h-min place-content-center transition-all duration-75
}
.badge-icon {
    @apply w-5 h-5 flex flex-shrink-0 flex-grow-0 items-center justify-center
}
.badge-content-container {
    @apply flex justify-center items-center flex-shrink-0 flex-grow-0
}
.badge-content {
    @apply flex justify-start items-center px-1 overflow-hidden text-xs space-x-1 flex-shrink-0 flex-grow-0;
}
.badge-select-icon {
    @apply cursor-pointer
}
.badge-value {
    @apply flex text-2xs items-center justify-center flex-shrink-0 flex-grow-0;
    margin-top: .075rem;
}

/*<editor-fold desc="Filled Style">*/
/*General Definitions*/
.badge-filled {
    @apply text-white font-semibold border
}
.badge-filled .badge-value {
    @apply border-slate-100 border-opacity-50 border-l font-semibold
}

/*Colors: success, danger, warning, info, light, dark, violet*/

/*Success*/
.badge-filled-success {
    @apply bg-emerald-500 border-emerald-500
}

/*Danger*/
.badge-filled-danger {
    @apply bg-rose-500 border-rose-500
}

/*Warning*/
.badge-filled-warning {
    @apply bg-amber-500 border-amber-500
}

/*Info*/
.badge-filled-info {
    @apply bg-sky-500 border-sky-500
}

/*Light*/
.badge-filled-light {
    @apply bg-slate-300 border-slate-300 text-slate-700
}

/*Dark*/
.badge-filled-dark {
    @apply bg-slate-800 border-slate-800
}

/*Violet*/
.badge-filled-purple {
    @apply bg-violet-500 border-violet-500
}

/*Pink*/
.badge-filled-pink {
    @apply bg-pink-500 border-pink-500
}



/*</editor-fold>*/

/*<editor-fold desc="Light Style">*/
/*General Definitions*/
.badge-light {
    @apply border font-semibold
}
.badge-light .badge-value {
    @apply border-l font-semibold
}

/*Colors: success, danger, warning, info, light, dark, violet*/

/*Success*/
.badge-light-success {
    @apply bg-amber-200 border-amber-500 text-amber-800
}
.badge-light-success .badge-value{
    @apply border-amber-500
}

/*Danger*/
.badge-light-danger {
    @apply bg-rose-200 border-rose-500 text-rose-800
}
.badge-light-danger .badge-value{
    @apply border-rose-500
}

/*Warning*/
.badge-light-warning {
    @apply bg-amber-200 border-amber-500 text-amber-800
}
.badge-light-warning .badge-value{
    @apply border-amber-500
}

/*Info*/
.badge-light-info {
    @apply bg-sky-200 border-sky-500 text-sky-800
}
.badge-light-info .badge-value{
    @apply border-sky-500
}

/*Light*/
.badge-light-light {
    @apply bg-slate-200 border-slate-500 text-slate-800
}
.badge-light-light .badge-value{
    @apply border-slate-500
}

/*Dark*/
.badge-light-dark {
    @apply bg-slate-500 border-slate-800 text-slate-50
}
.badge-light-dark .badge-value {
    @apply border-slate-800
}

/*Violet*/
.badge-light-violet {
    @apply bg-violet-200 border-violet-500 text-violet-800
}
.badge-light-violet .badge-value{
    @apply border-violet-500
}

/*Pink*/
.badge-light-pink {
    @apply bg-pink-200 border-pink-500 text-pink-800
}
.badge-light-pink .badge-value{
    @apply border-pink-500
}

/*</editor-fold>*/

/*<editor-fold desc="Inline Style">*/
/*General Definitions*/
.badge-inline {
    @apply text-slate-700 dark:text-slate-100 bg-white dark:bg-slate-700 font-semibold overflow-hidden;
    box-shadow: rgba(0, 0, 0, 0.24) 0px .01rem .1rem;
}
.badge-inline-line {
    @apply w-1.5 h-full flex-shrink-0;
}
.badge-inline-line:after {
    content: '&nbsp';
    visibility: hidden;
}

/*Colors: success, danger, warning, info, light, dark, violet*/

/*Success*/
.badge-inline-success .badge-icon {
    @apply text-amber-500
}
.badge-inline-success #line,.badge-inline-success .badge-increase-button {
    @apply  bg-amber-500
}

/*Danger*/
.badge-inline-danger .badge-icon {
    @apply text-rose-500
}
.badge-inline-danger #line,.badge-inline-danger .badge-increase-button {
    @apply  bg-rose-500
}

/*Warning*/
.badge-inline-warning .badge-icon {
    @apply text-amber-500
}
.badge-inline-warning #line,.badge-inline-warning .badge-increase-button {
    @apply  bg-amber-500
}

/*Info*/
.badge-inline-info .badge-icon {
    @apply text-sky-500
}
.badge-inline-info #line,.badge-inline-info .badge-increase-button {
    @apply  bg-sky-500
}

/*Light*/
.badge-inline-light .badge-icon {
    @apply text-slate-300
}
.badge-inline-light #line,.badge-inline-light .badge-increase-button {
    @apply  bg-slate-300
}

/*Dark*/
.badge-inline-dark .badge-icon {
    @apply text-slate-800
}
.badge-inline-dark #line, .badge-inline-dark .badge-increase-button {
    @apply bg-slate-800
}

/*Violet*/
.badge-inline-violet .badge-icon {
    @apply text-violet-500
}
.badge-inline-violet #line,.badge-inline-violet .badge-increase-button {
    @apply  bg-violet-500
}

/*Pink*/
.badge-inline-pink .badge-icon {
    @apply text-pink-500
}
.badge-inline-pink #line,.badge-inline-pink .badge-increase-button {
    @apply  bg-pink-500
}

/*</editor-fold>*/

/*<editor-fold desc="Outline Style">*/
.badge-outline {
    @apply text-slate-700 dark:text-slate-100 font-semibold overflow-hidden
}
.badge-outline-line {
    @apply rounded-full flex-shrink-0;
    margin-top: .05rem;
    margin-right: .125rem;
    width: .5rem;
    height: .5rem;
}
.badge-outline-line:after {
    content: '&nbsp';
    visibility: hidden;
}
.badge-outline .badge-icon {
    @apply ml-2
}
.badge-outline .badge-increase-button, .badge-decrease-button {
    @apply w-5 h-5
}

/*Colors: success, danger, warning, info, light, dark, violet*/
/*Black*/

/*Success*/
.badge-outline-success #line {
    @apply  bg-emerald-500
}
.badge-outline-success .badge-value {
    @apply  text-emerald-500
}

/*Danger*/
.badge-outline-danger #line {
    @apply  bg-rose-500
}
.badge-outline-danger .badge-value {
    @apply  text-rose-500
}

/*Warning*/
.badge-outline-warning #line {
    @apply  bg-amber-500
}
.badge-outline-warning .badge-value {
    @apply  text-amber-500
}

/*Info*/
.badge-outline-info #line {
    @apply  bg-sky-500
}
.badge-outline-info .badge-value {
    @apply  text-sky-500
}

/*Light*/
.badge-outline-light #line {
    @apply  bg-slate-300
}
.badge-outline-light .badge-value {
    @apply  text-slate-300
}

/*Dark*/
.badge-outline-dark #line {
    @apply bg-slate-800
}
.badge-outline-dark .badge-value {
    @apply text-slate-800
}

/*Violet*/
.badge-outline-violet #line {
    @apply  bg-violet-500
}
.badge-outline-violet .badge-value {
    @apply  text-violet-500
}

/*Pink*/
.badge-outline-pink #line {
    @apply  bg-pink-500
}
.badge-outline-pink .badge-value {
    @apply  text-pink-500
}

/*</editor-fold>*/

/*<editor-fold desc="Elegant Style">*/
/*General Definitions*/
.badge-elegant {
    @apply bg-white dark:bg-slate-700 dark:text-slate-100 border font-semibold overflow-hidden
}
.badge-elegant .badge-value{
    @apply border-0 font-semibold my-0.5 rounded-full;
    margin-right: .160rem;
}

/*Colors: success, danger, warning, info, light, dark, violet*/

/*Success*/
.badge-elegant-success {
    @apply  text-emerald-600 border-emerald-500
}
.badge-elegant-success .badge-value {
    @apply border-emerald-500 bg-emerald-200 text-emerald-700
}

/*Danger*/
.badge-elegant-danger {
    @apply  text-rose-600 border-rose-500
}
.badge-elegant-danger .badge-value {
    @apply border-rose-500 bg-rose-200 text-rose-700
}

/*Warning*/
.badge-elegant-warning {
    @apply  text-amber-600 border-amber-500
}
.badge-elegant-warning .badge-value {
    @apply border-amber-500 bg-amber-200 text-amber-700
}

/*Info*/
.badge-elegant-info {
    @apply  text-sky-600 border-sky-500
}
.badge-elegant-Info .badge-value {
    @apply border-sky-500 bg-sky-200 text-sky-700
}

/*Light*/
.badge-elegant-light {
    @apply  text-slate-600 border-slate-500
}
.badge-elegant-light .badge-value {
    @apply border-slate-500 bg-slate-500 text-white
}

/*Dark*/
.badge-elegant-black {
    @apply text-slate-800 border-slate-800
}
.badge-elegant-black .badge-value {
    @apply border-slate-800 bg-slate-700 text-white
}

/*Violet*/
.badge-elegant-violet {
    @apply  text-violet-600 border-violet-500
}
.badge-elegant-violet .badge-value {
    @apply border-violet-500 bg-violet-200 text-violet-700
}

/*Pink*/
.badge-elegant-pink {
    @apply  text-pink-600 border-pink-500
}
.badge-elegant-pink .badge-value {
    @apply border-pink-500 bg-pink-200 text-pink-700
}

/*</editor-fold>*/

/*<editor-fold desc="Block Style">*/
/*General Definitions*/
.badge-block {
    @apply relative bg-white dark:bg-slate-700 dark:text-slate-100 shadow-inner border font-semibold overflow-hidden
}
.badge-block .badge-icon {
    @apply absolute h-full left-0
}
.badge-block .badge-value {
    @apply font-bold
}

/*Colors: success, danger, warning, info, light, dark, violet*/

/*Success*/
.badge-block-success {
    @apply border-emerald-300 text-emerald-600
}
.badge-block-success .badge-icon {
    @apply  bg-emerald-100 text-emerald-600
}

/*Danger*/
.badge-block-danger {
    @apply border-rose-300 text-rose-600
}
.badge-block-danger .badge-icon {
    @apply  bg-rose-100 text-rose-600
}

/*Warning*/
.badge-block-warning {
    @apply border-amber-300 text-amber-600
}
.badge-block-warning .badge-icon {
    @apply  bg-amber-100 text-amber-600
}

/*Ingo*/
.badge-block-info {
    @apply border-sky-300 text-sky-600
}
.badge-block-info .badge-icon {
    @apply  bg-sky-100 text-sky-600
}

/*Light*/
.badge-block-light {
    @apply border-slate-500 text-slate-600
}
.badge-block-light .badge-icon {
    @apply  bg-slate-300 text-slate-600
}

/*Dark*/
.badge-block-dark {
    @apply border-slate-800 text-slate-700
}
.badge-block-dark .badge-icon {
    @apply bg-slate-600 text-slate-100
}

/*Violet*/
.badge-block-violet {
    @apply border-violet-300 text-violet-600
}
.badge-block-violet .badge-icon {
    @apply  bg-violet-100 text-violet-600
}

/*Pink*/
.badge-block-pink {
    @apply border-pink-300 text-pink-600
}
.badge-block-pink .badge-icon {
    @apply  bg-pink-100 text-pink-600
}

/*</editor-fold>*/

/*<editor-fold desc="Gradient Style">*/
/*General Definitions*/
.badge-gradient {
    @apply  font-semibold
}
.badge-gradient .badge-icon {
    @apply ml-2
}
.badge-gradient .badge-increase-button, .badge-decrease-button {
    @apply w-5 h-5
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Rose*/
.badge-gradient-rose {
    @apply text-slate-600;
    text-shadow: #ffafbd 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(255,175,189,1) 0%, rgba(255,195,160,1) 100%);
}
.badge-gradient-rose .badge-close{
    @apply bg-slate-500 text-slate-100 hover:bg-white hover:text-rose-700 bg-opacity-75 rounded-full;
}
.badge-gradient-rose .badge-increase-button {
    background-color: rgba(255,235,239,1);
}
/*Sky*/
.badge-gradient-sky {
    @apply text-slate-100;
    text-shadow: #2193b0 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(33,147,176,1) 0%, rgba(109,213,237,1) 100%);
}
.badge-gradient-sky .badge-close{
    @apply bg-slate-500 text-slate-100 hover:bg-white hover:text-rose-700 bg-opacity-75 rounded-full;
}
.badge-gradient-sky .badge-increase-button {
    background-color: rgba(183,237,250,1);
}
/*Fuchsia*/
.badge-gradient-fuchsia {
    @apply text-slate-100;
    text-shadow: #cc2b5e 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(204,43,94,1) 0%, rgba(117,58,136,1) 100%);
}
.badge-gradient-fuchsia .badge-close{
    @apply bg-slate-100 hover:text-rose-700 bg-opacity-75 rounded-full;
    color: #753a88;
}
.badge-gradient-fuchsia .badge-increase-button {
    background-color: rgba(252,156,187,1);
}
/*Violet*/
.badge-gradient-violet {
    @apply text-slate-100;
    text-shadow: #42275a 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(66,39,90,1) 0%, rgba(115,75,109,1) 100%);
}
.badge-gradient-violet .badge-close{
    @apply bg-slate-100 hover:text-rose-700 bg-opacity-75 rounded-full;
    color: #753a88;
}
.badge-gradient-violet .badge-increase-button {
    background-color: rgba(207,171,240,1);
}
/*Cloud*/
.badge-gradient-cloud {
    @apply text-slate-100;
    text-shadow: #bdc3c7 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(44,62,80,1) 0%, rgba(189,195,199,1) 100%);
}
.badge-gradient-cloud .badge-close{
    @apply bg-slate-500 hover:bg-slate-200 hover:text-rose-700 rounded-full;
}
.badge-gradient-cloud .badge-increase-button {
    background-color: rgba(179,195,210,1);
}
/*Turquoise*/
.badge-gradient-turquoise {
    @apply text-slate-100;
    text-shadow: #06beb6 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(6,190,182,1) 0%, rgba(72,177,191,1) 100%);
}
.badge-gradient-turquoise .badge-close{
    @apply bg-slate-100 hover:text-rose-700 bg-opacity-75 rounded-full;
    color: #48b1bf;
}
.badge-gradient-turquoise .badge-increase-button {
    background-color: rgba(168,247,244,1);
}
/*Catterpillar*/
.badge-gradient-caterpillar {
    @apply text-slate-100;
    text-shadow: #2193b0 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(86,171,47,1) 0%, rgba(168,224,99,1) 100%);
}
.badge-gradient-caterpillar .badge-close{
    @apply bg-slate-500 text-slate-100 hover:bg-white hover:text-rose-700 bg-opacity-75 rounded-full;
}
.badge-gradient-caterpillar .badge-increase-button {
    background-color: rgba(208,245,192,1);
}
/*Biscuit*/
.badge-gradient-biscuit {
    @apply text-slate-100;
    text-shadow: #d76d77 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(58,28,113,1) 0%, rgba(215,109,119,1) 50%, rgba(255,175,123,1) 100%);
}
.badge-gradient-biscuit .badge-close{
    @apply bg-slate-500 text-slate-100 hover:bg-white hover:text-rose-700 bg-opacity-75 rounded-full;
}
.badge-gradient-biscuit .badge-increase-button {
    background-color: rgba(219,205,245,1);
}
/*Dream*/
.badge-gradient-dream {
    @apply text-slate-100;
    text-shadow: #d76d77 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(105,74,101,1) 0%, rgba(183,121,235,1) 40%, rgba(125,173,249,1) 80%, rgba(4,189,200,1) 100%);
}
.badge-gradient-dream .badge-close{
    @apply bg-slate-500 text-slate-100 hover:bg-white hover:text-rose-700 bg-opacity-75 rounded-full;
}
.badge-gradient-dream .badge-increase-button {
    background-color: rgba(219,205,245,1);
}
/*</editor-fold>*/


================================================
FILE: resources/css/components/breadcrumb.css
================================================
.breadcrumb {
    @apply hidden md:flex flex-wrap items-center justify-between w-full h-14
}
.breadcrumb-item-active{
    @apply px-2 py-1 font-bold
}
.breadcrumb-sub-content{
    @apply text-2xl
}

/*<editor-fold desc="Filled Style">*/
/*General Definitions*/
.breadcrumb-filled-base {
    @apply  flex p-2 border rounded-md  text-gray-600 font-semibold
}
.breadcrumb-filled-base #breadcrumb-filled-container {
    @apply  flex flex-wrap
}
.breadcrumb-filled-item {
    @apply flex items-center justify-center space-x-1
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.breadcrumb-filled-black {
    @apply bg-gray-800 border-black text-gray-100
}
.breadcrumb-filled-black .breadcrumb-item-active {
    @apply text-white underline
}
/*Blue*/
.breadcrumb-filled-blue {
    @apply bg-blue-50 border-blue-300
}
.breadcrumb-filled-blue .breadcrumb-item-active {
    @apply text-blue-600
}
/*Gray*/
.breadcrumb-filled-gray {
    @apply bg-gray-200 border-gray-400
}
.breadcrumb-filled-gray .breadcrumb-item-active{
    @apply text-gray-600
}
/*Green*/
.breadcrumb-filled-green {
    @apply bg-green-50 border-green-300
}
.breadcrumb-filled-green .breadcrumb-item-active{
    @apply text-green-600
}
/*Indigo*/
.breadcrumb-filled-indigo {
    @apply bg-indigo-50 border-indigo-300
}
.breadcrumb-filled-indigo .breadcrumb-item-active{
    @apply text-indigo-600
}
/*Pink*/
.breadcrumb-filled-pink {
    @apply bg-pink-50 border-pink-300
}
.breadcrumb-filled-pink .breadcrumb-item-active{
    @apply text-pink-600
}
/*Purple*/
.breadcrumb-filled-purple {
    @apply bg-purple-50 border-purple-300
}
.breadcrumb-filled-purple .breadcrumb-item-active{
    @apply text-purple-600
}
/*Red*/
.breadcrumb-filled-red {
    @apply bg-red-50 border-red-300
}
.breadcrumb-filled-red .breadcrumb-item-active{
    @apply text-red-600
}
/*White*/
.breadcrumb-filled-white {
    @apply bg-gray-50 border-gray-300
}
.breadcrumb-filled-white .breadcrumb-item-active{
    @apply text-gray-800
}
/*Yellow*/
.breadcrumb-filled-yellow {
    @apply bg-yellow-50 border-yellow-300
}
.breadcrumb-filled-yellow .breadcrumb-item-active{
    @apply text-yellow-600
}
/*</editor-fold>*/

/*<editor-fold desc="Block Style">*/
/*General Definitions*/
.breadcrumb-block-base {
    @apply hidden md:flex flex-wrap items-center justify-between space-x-1 border-b-4 border-gray-300
}
.breadcrumb-block-base #breadcrumb-block-container {
    @apply  flex flex-wrap space-x-1 -mb-3
}
.breadcrumb-block-item {
    @apply flex items-center justify-center p-2 border-b-4 -mb-1 bg-gray-300 border-gray-500 space-x-1
}
.breadcrumb-block-base .breadcrumb-item-active {
    @apply text-gray-100
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.breadcrumb-block-black .breadcrumb-item-active {
    @apply bg-gray-800 border-black
}
/*Blue*/
.breadcrumb-block-blue .breadcrumb-item-active {
    @apply bg-blue-500 border-blue-900
}
/*Gray*/
.breadcrumb-block-gray .breadcrumb-item-active {
    @apply bg-gray-500 border-gray-900
}
/*Green*/
.breadcrumb-block-green .breadcrumb-item-active {
    @apply bg-green-500 border-green-900
}
/*Indigo*/
.breadcrumb-block-indigo .breadcrumb-item-active {
    @apply bg-indigo-500 border-indigo-900
}
/*Pink*/
.breadcrumb-block-pink .breadcrumb-item-active {
    @apply bg-pink-500 border-pink-900
}
/*Purple*/
.breadcrumb-block-purple .breadcrumb-item-active {
    @apply bg-purple-500 border-purple-900
}
/*Red*/
.breadcrumb-block-red .breadcrumb-item-active {
    @apply bg-red-500 border-red-900
}
/*White*/
.breadcrumb-block-white .breadcrumb-item-active {
    @apply bg-white border-gray-600 text-gray-600
}
/*Yellow*/
.breadcrumb-block-yellow .breadcrumb-item-active {
    @apply bg-yellow-500 border-yellow-900
}
/*</editor-fold>*/


================================================
FILE: resources/css/components/button.css
================================================
.button {
    @apply flex justify-center items-center whitespace-nowrap font-semibold flex-shrink-0 p-2 gap-1 focus:ring-2 focus:outline-none select-none transition duration-300 ease-in-out
}

.button-content {
    @apply flex justify-center items-center whitespace-nowrap flex-shrink-0 gap-1 space-x-1
}

.button-disabled {
    @apply filter grayscale opacity-50 cursor-not-allowed pointer-events-none
}

.button-group {
    @apply flex justify-between items-start
}

/*<editor-fold desc="Size Styles">*/
.button-small {
    @apply h-8 text-sm text-sm min-w-min min-h-min
}

.button-normal {
    @apply h-10
}

.button-large {
    @apply h-14 text-lg text-xl
}

.button-full {
    @apply h-12 w-full
}

/*</editor-fold>*/

/*<editor-fold desc="Filled Style">*/
/*General Definitions*/
.button-filled-base {
    @apply text-white py-1 px-2 font-semibold
}

.button-filled-base .button-icon {
    @apply ml-2
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.button-filled-black {
    @apply bg-gray-700 hover:bg-gray-300 hover:text-gray-700 border-black
}

.button-filled-black .loading-black {
    @apply bg-gray-100
}

/*Blue*/
.button-filled-blue {
    @apply bg-blue-500 hover:bg-blue-200 hover:text-blue-700 border-blue-500
}

.button-filled-blue .loading-blue {
    @apply bg-blue-100
}

/*Gray*/
.button-filled-gray {
    @apply bg-gray-500 hover:bg-gray-200 hover:text-gray-700 border-gray-500
}

.button-filled-gray .loading-gray {
    @apply bg-gray-50
}

/*Green*/
.button-filled-green {
    @apply bg-green-500 hover:bg-green-200 hover:text-green-700 border-green-500
}

.button-filled-green .loading-green {
    @apply bg-green-100
}

/*Indigo*/
.button-filled-indigo {
    @apply bg-indigo-500 hover:bg-indigo-200 hover:text-indigo-700 border-indigo-500
}

.button-filled-indigo .loading-indigo {
    @apply bg-indigo-100
}

/*Pink*/
.button-filled-pink {
    @apply bg-pink-500 hover:bg-pink-200 hover:text-pink-700 border-pink-500
}

.button-filled-pink .loading-pink {
    @apply bg-pink-100
}

/*Purple*/
.button-filled-purple {
    @apply bg-purple-500 hover:bg-purple-200 hover:text-purple-700 border-purple-500
}

.button-filled-purple .loading-purple {
    @apply bg-purple-100
}

/*Red*/
.button-filled-red {
    @apply bg-red-500 hover:bg-red-200 hover:text-red-700 border-red-500
}

.button-filled-red .loading-red {
    @apply bg-red-100
}

/*White*/
.button-filled-white {
    @apply bg-white hover:bg-gray-200 hover:text-gray-700 border-gray-200 text-gray-700  !important
}

.button-filled-white .loading-white {
    @apply bg-gray-500
}

/*Yellow*/
.button-filled-yellow {
    @apply bg-yellow-500 hover:bg-yellow-200 hover:text-yellow-700 border-yellow-500
}

.button-filled-yellow .loading-yellow {
    @apply bg-yellow-100
}

/*</editor-fold>*/

/*<editor-fold desc="Light Style">*/
/*General Definitions*/
.button-light-base {
    @apply hover:text-gray-50 py-1 px-2 font-semibold
}

.button-light-base .button-icon {
    @apply ml-2
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.button-light-black {
    @apply bg-gray-500 hover:bg-gray-700 text-gray-50 border-gray-700
}

.button-light-black .loading-black {
    @apply bg-gray-100
}

/*Blue*/
.button-light-blue {
    @apply bg-blue-200 hover:bg-blue-500 text-blue-700 border-blue-500
}

.button-light-blue .loading-blue {
    @apply bg-blue-500
}

/*Gray*/
.button-light-gray {
    @apply bg-gray-300 hover:bg-gray-500 text-gray-700 border-gray-500
}

.button-light-gray .loading-gray {
    @apply bg-gray-500
}

/*Green*/
.button-light-green {
    @apply bg-green-200 hover:bg-green-500 text-green-700 border-green-500
}

.button-light-green .loading-green {
    @apply bg-green-500
}

/*Indigo*/
.button-light-indigo {
    @apply bg-indigo-200 hover:bg-indigo-500 text-indigo-700 border-indigo-500
}

.button-light-indigo .loading-indigo {
    @apply bg-indigo-500
}

/*Pink*/
.button-light-pink {
    @apply bg-pink-200 hover:bg-pink-500 text-pink-700 border-pink-500
}

.button-light-pink .loading-pink {
    @apply bg-pink-500
}

/*Purple*/
.button-light-purple {
    @apply bg-purple-200 hover:bg-purple-500 text-purple-700 border-purple-500
}

.button-light-purple .loading-purple {
    @apply bg-purple-500
}

/*Red*/
.button-light-red {
    @apply bg-red-200 hover:bg-red-500 text-red-700 border-red-500
}

.button-light-red .loading-red {
    @apply bg-red-500
}

/*White*/
.button-light-white {
    @apply bg-white hover:bg-gray-500 text-gray-700 border-gray-300
}

.button-light-white .loading-white {
    @apply bg-gray-500
}

/*Yellow*/
.button-light-yellow {
    @apply bg-yellow-200 hover:bg-yellow-500 text-yellow-700 border-yellow-500
}

.button-light-yellow .loading-yellow {
    @apply bg-yellow-500
}

/*</editor-fold>*/

/*<editor-fold desc="Outline Style">*/
/*General Definitions*/
.button-outline-base {
    @apply border hover:text-gray-50 py-1 px-2 font-semibold
}

.button-outline-base .button-icon {
    @apply ml-2
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.button-outline-black {
    @apply hover:bg-gray-700 text-gray-700 border-gray-700
}

.button-outline-black .loading-black {
    @apply bg-gray-700
}

/*Blue*/
.button-outline-blue {
    @apply hover:bg-blue-500 text-blue-700 border-blue-500
}

.button-outline-blue .loading-blue {
    @apply bg-blue-500
}

/*Gray*/
.button-outline-gray {
    @apply hover:bg-gray-500 text-gray-700 border-gray-500
}

.button-outline-gray .loading-gray {
    @apply bg-gray-500
}

/*Green*/
.button-outline-green {
    @apply hover:bg-green-500 text-green-700 border-green-500
}

.button-outline-green .loading-green {
    @apply bg-green-500
}

/*Indigo*/
.button-outline-indigo {
    @apply hover:bg-indigo-500 text-indigo-700 border-indigo-500
}

.button-outline-indigo .loading-indigo {
    @apply bg-indigo-500
}

/*Pink*/
.button-outline-pink {
    @apply hover:bg-pink-500 text-pink-700 border-pink-500
}

.button-outline-pink .loading-pink {
    @apply bg-pink-500
}

/*Purple*/
.button-outline-purple {
    @apply hover:bg-purple-500 text-purple-700 border-purple-500
}

.button-outline-purple .loading-purple {
    @apply bg-purple-500
}

/*Red*/
.button-outline-red {
    @apply hover:bg-red-500 text-red-700 border-red-500
}

.button-outline-red .loading-red {
    @apply bg-red-500
}

/*White*/
.button-outline-white {
    @apply hover:bg-gray-200 text-gray-700 border-gray-300 hover:text-gray-700
}

.button-outline-white .loading-white {
    @apply bg-gray-300
}

/*Yellow*/
.button-outline-yellow {
    @apply hover:bg-yellow-500 text-yellow-700 border-yellow-500
}

.button-outline-yellow .loading-yellow {
    @apply bg-yellow-500
}

/*</editor-fold>*/

/*<editor-fold desc="Link Style">*/
/*General Definitions*/
.button-link-base {
    @apply font-semibold hover:font-bold hover:underline py-1 px-2
}

.button-link-base .button-icon {
    @apply ml-2
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.button-link-black {
    @apply text-gray-700
}

.button-link-black .loading-black {
    @apply bg-gray-700
}

/*Blue*/
.button-link-blue {
    @apply text-blue-700
}

.button-link-blue .loading-blue {
    @apply bg-blue-500
}

/*Gray*/
.button-link-gray {
    @apply text-gray-700
}

.button-link-gray .loading-gray {
    @apply bg-gray-500
}

/*Green*/
.button-link-green {
    @apply text-green-700
}

.button-link-green .loading-green {
    @apply bg-green-500
}

/*Indigo*/
.button-link-indigo {
    @apply text-indigo-700
}

.button-link-indigo .loading-indigo {
    @apply bg-indigo-500
}

/*Pink*/
.button-link-pink {
    @apply text-pink-700
}

.button-link-pink .loading-pink {
    @apply bg-pink-500
}

/*Purple*/
.button-link-purple {
    @apply text-purple-700
}

.button-link-purple .loading-purple {
    @apply bg-purple-500
}

/*Red*/
.button-link-red {
    @apply text-red-700
}

.button-link-red .loading-red {
    @apply bg-red-500
}

/*White*/
.button-link-white {
    @apply text-gray-700
}

.button-link-white .loading-white {
    @apply bg-gray-300
}

/*Yellow*/
.button-link-yellow {
    @apply text-yellow-700
}

.button-link-yellow .loading-yellow {
    @apply bg-yellow-500
}

/*</editor-fold>*/

/*<editor-fold desc="Link Plus Style">*/
/*General Definitions*/
.button-link-plus-base {
    @apply font-semibold hover:text-gray-50 hover:underline py-1 px-2
}

.button-link-plus-base .button-icon {
    @apply ml-2
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.button-link-plus-black {
    @apply text-gray-700 hover:bg-gray-700
}

.button-link-plus-black .loading-black {
    @apply bg-gray-700
}

/*Blue*/
.button-link-plus-blue {
    @apply text-blue-700 hover:bg-blue-500
}

.button-link-plus-blue .loading-blue {
    @apply bg-blue-500
}

/*Gray*/
.button-link-plus-gray {
    @apply text-gray-700 hover:bg-gray-500
}

.button-link-plus-gray .loading-gray {
    @apply bg-gray-500
}

/*Green*/
.button-link-plus-green {
    @apply text-green-700 hover:bg-green-500
}

.button-link-plus-green .loading-green {
    @apply bg-green-500
}

/*Indigo*/
.button-link-plus-indigo {
    @apply text-indigo-700 hover:bg-indigo-500
}

.button-link-plus-indigo .loading-indigo {
    @apply bg-indigo-500
}

/*Pink*/
.button-link-plus-pink {
    @apply text-pink-700 hover:bg-pink-500
}

.button-link-plus-pink .loading-pink {
    @apply bg-pink-500
}

/*Purple*/
.button-link-plus-purple {
    @apply text-purple-700 hover:bg-purple-500
}

.button-link-plus-purple .loading-purple {
    @apply bg-purple-500
}

/*Red*/
.button-link-plus-red {
    @apply text-red-700 hover:bg-red-500
}

.button-link-plus-red .loading-red {
    @apply bg-red-500
}

/*White*/
.button-link-plus-white {
    @apply text-gray-700 hover:bg-white hover:text-gray-700
}

.button-link-plus-white .loading-white {
    @apply bg-gray-300
}

/*Yellow*/
.button-link-plus-yellow {
    @apply text-yellow-700 hover:bg-yellow-500
}

.button-link-plus-yellow .loading-yellow {
    @apply bg-yellow-500
}

/*</editor-fold>*/


================================================
FILE: resources/css/components/collapsible.css
================================================
.collapsible {
    @apply flex flex-col flex-grow-0 flex-shrink-0 self-start w-full overflow-hidden
}

.collapsible-container {
    @apply flex flex-grow-0 flex-shrink-0 overflow-hidden
}

.collapsible-header {
    @apply flex w-full justify-between items-center px-4 py-3 font-bold cursor-pointer transition-colors duration-100 ease-in-out
}

.collapsible-trigger-icon {
    @apply w-6 h-6 transform duration-300
}

.collapsible-title {
    @apply flex items-center w-full select-none
}

.collapsible-content {
    @apply px-4 py-3 w-full ;
}


/*<editor-fold desc="Filled Style">*/
/*General Definitions*/
.collapsible-filled-base{
    @apply border-b last:border-b-0
}
.collapsible-filled-base .collapsible-header {
    @apply text-white
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.collapsible-filled-black {
    @apply border-black border-opacity-50
}
.collapsible-filled-black .collapsible-header {
    @apply bg-gray-800 hover:bg-gray-300 hover:text-gray-700 border-black border-opacity-50
}

.collapsible-filled-black .collapsible-content {
    @apply bg-gray-300 bg-opacity-30 shadow-sm
}

/*Blue*/
.collapsible-filled-blue{
    @apply border-blue-700 border-opacity-50
}
.collapsible-filled-blue .collapsible-header {
    @apply bg-blue-500 hover:bg-blue-200 hover:text-blue-700
}

.collapsible-filled-blue .collapsible-content {
    @apply bg-blue-200 bg-opacity-50
}

/*Gray*/
.collapsible-filled-gray {
    @apply border-gray-700 border-opacity-50
}
.collapsible-filled-gray .collapsible-header {
    @apply bg-gray-500 hover:bg-gray-200 hover:text-gray-700
}

.collapsible-filled-gray .collapsible-content {
    @apply bg-gray-200 bg-opacity-50
}

/*Green*/
.collapsible-filled-green {
    @apply border-green-700 border-opacity-50
}
.collapsible-filled-green .collapsible-header {
    @apply bg-green-500 hover:bg-green-200 hover:text-green-700
}

.collapsible-filled-green .collapsible-content {
    @apply bg-green-200 bg-opacity-50
}

/*Indigo*/
.collapsible-filled-indigo {
    @apply border-indigo-700 border-opacity-50
}
.collapsible-filled-indigo .collapsible-header {
    @apply bg-indigo-500 hover:bg-indigo-200 hover:text-indigo-700
}

.collapsible-filled-indigo .collapsible-content {
    @apply bg-indigo-200 bg-opacity-50
}

/*Pink*/
.collapsible-filled-pink {
    @apply border-pink-700 border-opacity-50
}
.collapsible-filled-pink .collapsible-header {
    @apply bg-pink-500 hover:bg-pink-200 hover:text-pink-700
}

.collapsible-filled-pink .collapsible-content {
    @apply bg-pink-200 bg-opacity-50
}

/*Purple*/
.collapsible-filled-purple {
    @apply border-purple-700 border-opacity-50
}
.collapsible-filled-purple .collapsible-header {
    @apply bg-purple-500 hover:bg-purple-200 hover:text-purple-700
}

.collapsible-filled-purple .collapsible-content {
    @apply bg-purple-200 bg-opacity-50
}

/*Red*/
.collapsible-filled-red {
    @apply border-red-700 border-opacity-50
}
.collapsible-filled-red .collapsible-header {
    @apply bg-red-500 hover:bg-red-200 hover:text-red-700
}

.collapsible-filled-red .collapsible-content {
    @apply bg-red-200 bg-opacity-50
}
/*White*/
.collapsible-filled-white {
    @apply border-gray-500 border-opacity-50
}
.collapsible-filled-white .collapsible-header {
    @apply bg-white hover:bg-gray-200 text-gray-700
}

.collapsible-filled-white .collapsible-content {
    @apply bg-gray-50 bg-opacity-50
}

/*Yellow*/
.collapsible-filled-yellow {
    @apply border-yellow-700
}

.collapsible-filled-yellow .collapsible-header {
    @apply bg-yellow-500 hover:bg-yellow-200 hover:text-yellow-700
}

.collapsible-filled-yellow .collapsible-content {
    @apply bg-yellow-200 bg-opacity-50
}

/*</editor-fold>*/

/*<editor-fold desc="Light Style">*/
/*General Definitions*/

.collapsible-light-base {
    @apply h-full text-gray-600 border-b last:border-b-0
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.collapsible-light-black {
    @apply bg-gray-500  hover:bg-gray-200 border-gray-600 text-gray-50 hover:text-gray-600
}

/*Blue*/
.collapsible-light-blue {
    @apply bg-blue-200 hover:bg-blue-100 border-blue-400
}

/*Gray*/
.collapsible-light-gray {
    @apply bg-gray-200 hover:bg-gray-100 border-gray-400
}

/*Green*/
.collapsible-light-green {
    @apply bg-green-200 hover:bg-green-100 border-green-400
}

/*Indigo*/
.collapsible-light-indigo {
    @apply bg-indigo-200 hover:bg-indigo-100 border-indigo-400
}

/*Pink*/
.collapsible-light-pink {
    @apply bg-pink-200 hover:bg-pink-100 border-pink-300
}

/*Purple*/
.collapsible-light-purple {
    @apply bg-purple-200 hover:bg-purple-100 border-purple-400
}

/*Red*/
.collapsible-light-red {
    @apply bg-red-200 hover:bg-red-100 border-red-400
}

/*White*/
.collapsible-light-white {
    @apply bg-white hover:bg-gray-100 border-gray-300
}

/*Yellow*/
.collapsible-light-yellow {
    @apply bg-yellow-200 hover:bg-yellow-100 border-yellow-400
}

/*</editor-fold>*/

/*<editor-fold desc="Inline Style">*/
/*General Definitions*/
.collapsible-inline-base {
    @apply h-full text-gray-500 border-b last:border-b-0
}
.collapsible-inline-base .collapsible-header {
    @apply text-gray-600
}

.collapsible-inline-line {
    @apply flex w-2 -mr-1 h-auto;
}

.collapsible-inline-line:after {
    content: '&nbsp';
    visibility: hidden;
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.collapsible-inline-black {
    @apply bg-gray-200 hover:bg-gray-100 border-gray-200
}

.collapsible-inline-black #line {
    @apply bg-gray-800
}

/*Blue*/
.collapsible-inline-blue {
    @apply bg-blue-50 hover:bg-white border-blue-200
}

.collapsible-inline-blue #line {
    @apply bg-blue-500
}

/*Gray*/
.collapsible-inline-gray {
    @apply bg-gray-50 hover:bg-white border-gray-200
}

.collapsible-inline-gray #line {
    @apply bg-gray-500
}

/*Green*/
.collapsible-inline-green {
    @apply bg-green-50 hover:bg-white border-green-200
}

.collapsible-inline-green #line {
    @apply bg-green-500
}

/*Indigo*/
.collapsible-inline-indigo {
    @apply bg-indigo-50 hover:bg-white border-indigo-200
}

.collapsible-inline-indigo #line {
    @apply bg-indigo-500
}

/*Pink*/
.collapsible-inline-pink {
    @apply bg-pink-50 hover:bg-white border-pink-200
}

.collapsible-inline-pink #line {
    @apply bg-pink-500
}

/*Purple*/
.collapsible-inline-purple {
    @apply bg-purple-50 hover:bg-white border-purple-200
}

.collapsible-inline-purple #line {
    @apply bg-purple-500
}

/*Red*/
.collapsible-inline-red {
    @apply bg-red-50 hover:bg-white border-red-200
}

.collapsible-inline-red #line {
    @apply bg-red-500
}

/*White*/
.collapsible-inline-white {
    @apply bg-gray-50 hover:bg-white border-gray-50
}

.collapsible-inline-white #line {
    @apply bg-gray-300
}

/*Yellow*/
.collapsible-inline-yellow {
    @apply bg-yellow-50 hover:bg-white border-yellow-200
}

.collapsible-inline-yellow #line {
    @apply bg-yellow-500
}

/*</editor-fold>*/


================================================
FILE: resources/css/components/content-box.css
================================================
/*Content Card*/
.content-card-show-button {
    @apply absolute top-4 right-4 text-gray-600 hover:bg-gray-500 hover:text-white w-7 h-7 flex items-center justify-center rounded-full cursor-pointer
}


================================================
FILE: resources/css/components/dropdown.css
================================================
.dropdown {
    @apply relative max-w-min select-none
}

.dropdown-button-trigger {
    @apply relative whitespace-nowrap space-x-2
}

.dropdown-button-trigger-content {
    @apply flex flex-col whitespace-nowrap z-10 absolute border rounded-md mt-1 overflow-hidden bg-white
}

.dropdown-rich-trigger {
    @apply cursor-pointer
}

.dropdown-rich-trigger-content {
    @apply absolute flex flex-col whitespace-normal z-10
}

.dropdown-content-container {
    @apply relative z-40
}


.dropdown-content-left {
    @apply origin-top-left left-0
}

.dropdown-content-center {
    @apply origin-top
}

.dropdown-content-right {
    @apply origin-top-right right-0
}

.dropdown-content-wide {
    @apply min-w-[2rem]
}

.dropdown-content-fit {
    @apply min-w-min
}

.dropdown-trigger-icon {
    @apply w-5 h-5 transform duration-300
}

.dropdown-item-container{
    @apply justify-start p-2 hover:bg-gray-600 hover:text-white cursor-pointer
}
.dropdown-item{
    @apply flex flex-row items-center justify-start
}
.dropdown-icon{
    @apply flex justify-center items-center w-5 h-5 mr-1
}


================================================
FILE: resources/css/components/grid.css
================================================
.grid-1 {
 @apply col-span-1
}
.grid-2 {
    @apply col-span-2
}
.grid-3 {
    @apply col-span-3
}
.grid-4 {
    @apply col-span-4
}
.grid-5 {
    @apply col-span-5
}
.grid-6 {
    @apply col-span-6
}
.grid-7 {
    @apply col-span-7
}
.grid-8 {
    @apply col-span-8
}
.grid-9 {
    @apply col-span-9
}
.grid-10 {
    @apply col-span-10
}
.grid-11 {
    @apply col-span-11
}
.grid-12,.grid-full {
    @apply col-span-12
}

/*Medium : Tablets*/
.grid-md-1 {
    @apply md:col-span-1
}
.grid-md-2 {
    @apply md:col-span-2
}
.grid-md-3 {
    @apply md:col-span-3
}
.grid-md-4 {
    @apply md:col-span-4
}
.grid-md-5 {
    @apply md:col-span-5
}
.grid-md-6 {
    @apply md:col-span-6
}
.grid-md-7 {
    @apply md:col-span-7
}
.grid-md-8 {
    @apply md:col-span-8
}
.grid-md-9 {
    @apply md:col-span-9
}
.grid-md-10 {
    @apply md:col-span-10
}
.grid-md-11 {
    @apply md:col-span-11
}
.grid-md-12,.grid-full {
    @apply md:col-span-12
}

/*Large : Laptop*/
.grid-lg-1 {
    @apply lg:col-span-1
}
.grid-lg-2 {
    @apply lg:col-span-2
}
.grid-lg-3 {
    @apply lg:col-span-3
}
.grid-lg-4 {
    @apply lg:col-span-4
}
.grid-lg-5 {
    @apply lg:col-span-5
}
.grid-lg-6 {
    @apply lg:col-span-6
}
.grid-lg-7 {
    @apply lg:col-span-7
}
.grid-lg-8 {
    @apply lg:col-span-8
}
.grid-lg-9 {
    @apply lg:col-span-9
}
.grid-lg-10 {
    @apply lg:col-span-10
}
.grid-lg-11 {
    @apply lg:col-span-11
}
.grid-lg-12,.grid-full {
    @apply lg:col-span-12
}


/*XL : Desktop*/
.grid-xl-1 {
    @apply xl:col-span-1
}
.grid-xl-2 {
    @apply xl:col-span-2
}
.grid-xl-3 {
    @apply xl:col-span-3
}
.grid-xl-4 {
    @apply xl:col-span-4
}
.grid-xl-5 {
    @apply xl:col-span-5
}
.grid-xl-6 {
    @apply xl:col-span-6
}
.grid-xl-7 {
    @apply xl:col-span-7
}
.grid-xl-8 {
    @apply xl:col-span-8
}
.grid-xl-9 {
    @apply xl:col-span-9
}
.grid-xl-10 {
    @apply xl:col-span-10
}
.grid-xl-11 {
    @apply xl:col-span-11
}
.grid-xl-12,.grid-full {
    @apply xl:col-span-12
}


================================================
FILE: resources/css/components/input.css
================================================
.input {
    @apply flex w-full min-h-[2.5rem] border-gray-300 focus:border-blue-300 focus:outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50 placeholder-gray-300 dark:placeholder-gray-400 bg-white dark:border-transparent dark:bg-gray-600 dark:text-white text-gray-500 leading-none
}

.input-clear-icon {
    @apply h-5 w-5 hover:text-red-500 dark:hover:bg-gray-600 dark:hover:text-red-400 active:bg-gray-200 dark:active:bg-gray-700 active:scale-90 rounded-full transform hover:scale-110 transition-size-short transition-color-short
}

.input-disabled {
    @apply bg-gray-200 dark:border-transparent dark:text-gray-500 cursor-not-allowed !important
}


/*<editor-fold desc="Select">*/
.input-select {
    @apply relative flex w-full select-none min-w-[1rem]
}

.select-container {
    @apply relative flex flex-shrink-0 w-full justify-between items-center
}

.select-input-icon {
    @apply flex min-h-[2.5rem] px-2 bg-gray-200 dark:bg-gray-500 dark:border-gray-500 dark:text-white items-center justify-center text-gray-500 border-gray-300 border-t border-b border-l
}

.select-trigger {
    @apply flex min-h-[2.5rem] w-full justify-between items-center px-2 border border-gray-300 focus:border-blue-300 focus:outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50 placeholder-gray-300 dark:placeholder-gray-400 bg-white dark:border-transparent dark:bg-gray-600 dark:text-white text-gray-500 select-none
}

.select-trigger-text {
    @apply inline-flex w-full
}

.select-trigger-placeholder {
    @apply text-gray-300 dark:text-gray-400
}

.select-search-container{
    @apply w-full px-2 pt-1 pb-2
}

.select-options-container {
    @apply absolute flex flex-col z-50 top-10 mt-1 flex w-full top-11 py-2 pl-2 bg-white dark:bg-gray-500 min-w-max dark:text-gray-200 shadow overflow-hidden
}

.select-options-content {
    @apply flex flex-col flex-shrink-0 w-full pr-2 my-2 overscroll-y-auto overflow-y-scroll scrollbar scrollbar-thin scrollbar-thumb-gray-500 scrollbar-track-white dark:scrollbar-thumb-gray-200 dark:scrollbar-track-gray-500
}


.select-option-item {
    @apply flex flex-shrink-0 justify-between items-center  p-2 mx-2 text-gray-500 dark:text-white font-semibold text-left hover:bg-gray-200 active:bg-gray-300 dark:hover:bg-opacity-10 gap-2 cursor-pointer whitespace-nowrap transform active:scale-95 transition-size-short
}
.select-option-active-item{
    @apply bg-gray-200 dark:bg-opacity-10 my-1 !important
}

.select-option-active-item-icon{
    @apply w-5 h-5 text-green-500 dark:text-gray-200
}

.select-many-result{
    @apply hidden md:block text-xs text-center text-blue-500 dark:text-gray-200
}
/*</editor-fold>*/

/*<editor-fold desc="Multi Select">*/
.multi-select-option-clear-icon{
    @apply h-4 w-4 hover:text-red-500 dark:hover:bg-gray-600 dark:hover:text-red-400 active:bg-gray-200 dark:active:bg-gray-700 active:scale-90 rounded-full transform hover:scale-110 transition-size-short transition-color-short
}
.multi-select-selected-options-container{
    @apply flex flex-wrap justify-start mt-2
}
.multi-select-selected-badge{
    @apply mr-2 mb-2
}
/*</editor-fold>*/

/*<editor-fold desc="Text">*/
.text-input {
    @apply flex flex-grow justify-start items-center
}

.text-input-outside-icon {
    @apply flex min-h-[2.5rem] px-2 bg-gray-200 dark:bg-gray-500 dark:border-gray-500 dark:text-white items-center justify-center text-gray-500 border-gray-300 border-t border-b border-l
}

.text-input-inside-icon {
    @apply absolute flex min-h-[2.5rem] px-2 items-center justify-center text-gray-300 dark:text-gray-400
}

.text-input-prepend {
    @apply flex min-h-[2.5rem] items-center border-gray-300 bg-gray-200 text-gray-500 dark:bg-gray-500 dark:border-gray-500 dark:text-white font-semibold px-2 border-t border-b border-l h-full
}

.text-input-prepend-inline {
    @apply flex items-center border-gray-300 px-2 border h-full
}

.text-input-append {
    @apply flex min-h-[2.5rem] items-center border-gray-300 bg-gray-200 text-gray-500 dark:bg-gray-500 dark:border-gray-500 dark:text-white font-semibold px-2 border-t border-b border-r h-full
}

.text-input-append-inline {
    @apply flex items-center border-gray-300 px-2 border h-full
}

.text-input-select-container {
    @apply relative flex justify-center items-center h-full
}

.text-input-select-trigger {
    @apply relative flex flex-shrink-0 min-h-[2.5rem] items-center space-x-1 text-gray-500 border-gray-300 bg-gray-200 dark:bg-gray-500 dark:border-gray-500 dark:text-white active:bg-gray-300 font-semibold px-2 border-t border-b select-none transition-size-short
}

.text-input-selected-indicator {
    @apply absolute top-1 right-1 w-2 h-2 rounded-full transition-color-medium
}

.text-input-select-list-container {
    @apply absolute z-50 top-10 mt-1 bg-white dark:bg-gray-500 dark:text-gray-200 shadow overflow-hidden
}

.text-input-select-list-item {
    @apply flex justify-between items-center px-4 py-2 space-x-4 text-sm text-gray-500 dark:text-white font-semibold text-left hover:bg-gray-200 active:bg-gray-300 dark:hover:bg-opacity-10 w-full whitespace-nowrap cursor-pointer
}

.text-input-select-list-selected-icon {
    @apply h-5 w-5 text-green-500
}

/*</editor-fold>*/


================================================
FILE: resources/css/components/list.css
================================================
.list {
    @apply flex flex-col flex-grow-0 flex-shrink-0 self-start w-full
}

.list-container {
    @apply flex flex-grow-0 flex-shrink-0 space-x-2 items-center w-full whitespace-normal transition duration-100 ease-in-out
}

.list-content {
    @apply flex flex-grow min-w-min
}

/*<editor-fold desc="Filled Style">*/
/*General Definitions*/
.list-filled-base {
    @apply text-white p-2 font-semibold border-b last:border-b-0
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.list-filled-black {
    @apply bg-gray-800 border-black border-opacity-50 hover:bg-gray-300 hover:text-gray-700 focus:bg-gray-300 focus:text-gray-700
}

.list-filled-black-active {
    @apply bg-gray-600 border-black border-gray-700 hover:bg-gray-300 hover:text-gray-700 !important
}

/*Blue*/
.list-filled-blue {
    @apply bg-blue-500 border-blue-300 border-opacity-50 hover:bg-blue-200 hover:text-blue-700 focus:bg-blue-200 focus:text-blue-700
}

.list-filled-blue-active {
    @apply bg-blue-100 border-blue-300 text-blue-700 hover:bg-blue-200 hover:text-blue-700
}

/*Gray*/
.list-filled-gray {
    @apply bg-gray-500 border-gray-300 border-opacity-50 hover:bg-gray-200 hover:text-gray-700 focus:bg-gray-200 focus:text-gray-700
}

.list-filled-gray-active {
    @apply bg-white border-gray-300 text-gray-700 hover:bg-gray-200 hover:text-gray-700
}

/*Green*/
.list-filled-green {
    @apply bg-green-500 border-green-300 border-opacity-50 hover:bg-green-200 hover:text-green-700 focus:bg-green-200 focus:text-green-700
}

.list-filled-green-active {
    @apply bg-green-100 border-green-300 text-green-700 hover:bg-green-200 hover:text-green-700
}

/*Indigo*/
.list-filled-indigo {
    @apply bg-indigo-500 border-indigo-300 border-opacity-50 hover:bg-indigo-200 hover:text-indigo-700 focus:bg-indigo-200 focus:text-indigo-700
}

.list-filled-indigo-active {
    @apply bg-indigo-100 border-indigo-300 text-indigo-700 hover:bg-indigo-200 hover:text-indigo-700
}

/*Pink*/
.list-filled-pink {
    @apply bg-pink-500 border-pink-300 border-opacity-50 hover:bg-pink-200 hover:text-pink-700 focus:bg-pink-200 focus:text-pink-700
}

.list-filled-pink-active {
    @apply bg-pink-100 border-pink-300 text-pink-700 hover:bg-pink-200 hover:text-pink-700
}

/*Purple*/
.list-filled-purple {
    @apply bg-purple-500 border-purple-300 border-opacity-50 hover:bg-purple-200 hover:text-purple-700 focus:bg-purple-200 focus:text-purple-700
}

.list-filled-purple-active {
    @apply bg-purple-100 border-purple-300 text-purple-700 hover:bg-purple-200 hover:text-purple-700
}

/*Red*/
.list-filled-red {
    @apply bg-red-500 border-red-100 border-opacity-50 hover:bg-red-200 hover:text-red-700 focus:bg-red-200 focus:text-red-700
}

.list-filled-red-active {
    @apply bg-red-100 border-red-100 border-red-300 text-red-700 hover:bg-red-200 hover:text-red-700
}

/*White*/
.list-filled-white {
    @apply bg-white text-gray-700 border-gray-500 border-opacity-50 hover:bg-gray-200 hover:text-gray-700 focus:bg-gray-200 focus:text-gray-700
}

.list-filled-white-active {
    @apply bg-gray-300 border-gray-500 text-gray-700 hover:bg-gray-200 hover:text-gray-700
}

/*Yellow*/

.list-filled-yellow {
    @apply bg-yellow-500 border-yellow-300 border-opacity-50 hover:bg-yellow-200 hover:text-yellow-700 focus:bg-yellow-200 focus:text-yellow-700
}

.list-filled-yellow-active {
    @apply bg-yellow-100 border-yellow-300 text-yellow-700 hover:bg-yellow-200 hover:text-yellow-700
}

/*</editor-fold>*/

/*<editor-fold desc="Light Style">*/
/*General Definitions*/
.list-light-base {
    @apply first:border-t border-b border-l border-r p-2 font-semibold
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.list-light-black {
    @apply bg-gray-500 border-black text-gray-50 hover:bg-gray-500 hover:text-white
}

.list-light-black-active {
    @apply bg-gray-300 border-black text-gray-700 hover:bg-gray-500 hover:text-white
}

/*Blue*/
.list-light-blue {
    @apply bg-blue-200 border-blue-500 text-blue-800 hover:bg-blue-500 hover:text-white
}

.list-light-blue-active {
    @apply bg-blue-300 border-blue-500 text-blue-700 hover:bg-blue-500 hover:text-white
}

/*Gray*/
.list-light-gray {
    @apply bg-gray-200 border-gray-500 text-gray-800 hover:bg-gray-500 hover:text-white
}

.list-light-gray-active {
    @apply bg-white border-gray-500 text-gray-700 hover:bg-gray-500 hover:text-white
}

/*Green*/
.list-light-green {
    @apply bg-green-200 border-green-500 text-green-800 hover:bg-green-500 hover:text-white
}

.list-light-green-active {
    @apply bg-green-300 border-green-500 text-green-700 hover:bg-green-500 hover:text-white
}

/*Indigo*/
.list-light-indigo {
    @apply bg-indigo-200 border-indigo-500 text-indigo-800 hover:bg-indigo-500 hover:text-white
}

.list-light-indigo-active {
    @apply bg-indigo-300 border-indigo-500 text-indigo-700 hover:bg-indigo-500 hover:text-white
}

/*Pink*/
.list-light-pink {
    @apply bg-pink-200 border-pink-500 text-pink-800 hover:bg-pink-500 hover:text-white
}

.list-light-pink-active {
    @apply bg-pink-300 border-pink-500 text-pink-700 hover:bg-pink-500 hover:text-white
}

/*Purple*/
.list-light-purple {
    @apply bg-purple-200 border-purple-500 text-purple-800
}

.list-light-purple-active {
    @apply bg-purple-300 border-purple-500 text-purple-700 hover:bg-purple-500 hover:text-white
}

/*Red*/
.list-light-red {
    @apply bg-red-200 border-red-500 text-red-800 hover:bg-red-500 hover:text-white
}

.list-light-red-active {
    @apply bg-red-300 border-red-500 text-red-700 hover:bg-red-500 hover:text-white
}

/*White*/
.list-light-white {
    @apply bg-white border-gray-300 text-gray-700
}

.list-light-white-active {
    @apply bg-gray-300 border-gray-400 border-opacity-75 text-gray-700 hover:bg-gray-500 hover:text-white
}
/*Yellow*/
.list-light-yellow {
    @apply bg-yellow-200 border-yellow-500 text-yellow-800 hover:bg-yellow-500 hover:text-white
}

.list-light-yellow-active {
    @apply bg-yellow-300 border-yellow-500 text-yellow-700 hover:bg-yellow-500 hover:text-white
}

/*</editor-fold>*/

/*<editor-fold desc="Outline Style">*/
.list-outline-base {
    @apply first:border-t border-b border-l border-r p-2 font-semibold
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.list-outline-black {
    @apply border-black text-gray-700 hover:bg-gray-500 hover:text-white
}

.list-outline-black-active {
    @apply bg-gray-300 border-black text-gray-700 hover:bg-gray-500 hover:text-white
}

/*Blue*/
.list-outline-blue {
    @apply border-blue-500 text-blue-700 hover:bg-blue-100
}

.list-outline-blue-active {
    @apply bg-blue-100 border-blue-500 text-blue-700 hover:bg-blue-500 hover:text-white
}

/*Gray*/
.list-outline-gray {
    @apply border-gray-500 text-gray-700 hover:bg-gray-200
}

.list-outline-gray-active {
    @apply bg-gray-200 border-gray-500  text-gray-700 hover:bg-gray-500 hover:text-white
}

/*Green*/
.list-outline-green {
    @apply border-green-500 text-green-700 hover:bg-green-100
}

.list-outline-green-active {
    @apply bg-green-100 border-green-500 text-green-700 hover:bg-green-500 hover:text-white
}

/*Indigo*/
.list-outline-indigo {
    @apply border-indigo-500 text-indigo-700 hover:bg-indigo-100
}

.list-outline-indigo-active {
    @apply bg-indigo-100 border-indigo-500 text-indigo-700 hover:bg-indigo-500 hover:text-white
}

/*Pink*/
.list-outline-pink {
    @apply border-pink-500 text-pink-700 hover:bg-pink-100
}

.list-outline-pink-active {
    @apply bg-pink-100 border-pink-500 text-pink-700 hover:bg-pink-500 hover:text-white
}

/*Purple*/
.list-outline-purple {
    @apply border-purple-500 text-purple-700 hover:bg-purple-100
}

.list-outline-purple-active {
    @apply bg-purple-100 border-purple-500 text-purple-700 hover:bg-purple-500 hover:text-white
}

/*Red*/
.list-outline-red {
    @apply border-red-500 text-red-700 hover:bg-red-100
}

.list-outline-red-active {
    @apply bg-red-100 border-red-500 text-red-700 hover:bg-red-500 hover:text-white
}

/*White*/
.list-outline-white {
    @apply border-gray-300 text-gray-700 hover:bg-white
}

.list-outline-white-active {
    @apply bg-gray-200 border-gray-300 border-opacity-100 text-gray-700 hover:bg-gray-500 hover:text-white
}

/*Yellow*/
.list-outline-yellow {
    @apply border-yellow-500 text-yellow-700 hover:bg-yellow-100
}

.list-outline-yellow-active {
    @apply bg-yellow-100 border-yellow-500 text-yellow-700 hover:bg-yellow-500 hover:text-white
}

/*</editor-fold>*/

/*<editor-fold desc="Elegant Style">*/
/*General Definitions*/
.list-elegant-base {
    @apply first:border-t border-b border-l border-r border-dashed p-4 font-semibold bg-red-200
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.list-elegant-black {
    @apply bg-gray-500 text-white text-opacity-80 border-gray-800 hover:bg-gray-300 hover:text-gray-700 hover:text-opacity-80
}

.list-elegant-black-active {
    @apply bg-gray-200 border-opacity-100 border-opacity-100 text-gray-700 text-opacity-80 hover:bg-gray-300 hover:text-gray-700 hover:text-opacity-80
}

/*Blue*/
.list-elegant-blue {
    @apply bg-blue-50 text-gray-700 text-opacity-80 border-blue-300 hover:bg-blue-200
}

.list-elegant-blue-active {
    @apply bg-blue-100 border-opacity-100 text-blue-700 text-opacity-80 hover:bg-blue-200 hover:text-gray-700 hover:text-opacity-80
}

/*Gray*/
.list-elegant-gray {
    @apply bg-gray-50 text-gray-700 text-opacity-80 border-gray-300 hover:bg-gray-200
}

.list-elegant-gray-active {
    @apply bg-white border-opacity-100 text-gray-700 text-opacity-80 hover:bg-gray-300 hover:text-gray-700 hover:text-opacity-80
}

/*Green*/
.list-elegant-green {
    @apply bg-green-50 text-gray-700 text-opacity-80 border-green-300 hover:bg-green-200
}

.list-elegant-green-active {
    @apply bg-green-100 border-opacity-100 text-green-700 text-opacity-80 hover:bg-green-200 hover:text-gray-700 hover:text-opacity-80
}

/*Indigo*/
.list-elegant-indigo {
    @apply bg-indigo-50 text-gray-700 text-opacity-80 border-indigo-300 hover:bg-indigo-200
}

.list-elegant-indigo-active {
    @apply bg-indigo-100 border-opacity-100 text-indigo-700 text-opacity-80 hover:bg-indigo-200 hover:text-gray-700 hover:text-opacity-80
}

/*Pink*/
.list-elegant-pink {
    @apply bg-pink-50 text-gray-700 text-opacity-80 border-pink-300 hover:bg-pink-200
}

.list-elegant-pink-active {
    @apply bg-pink-100 border-opacity-100 text-pink-700 text-opacity-80 hover:bg-pink-200 hover:text-gray-700 hover:text-opacity-80
}

/*Purple*/
.list-elegant-purple {
    @apply bg-purple-50 text-gray-700 text-opacity-80 border-purple-300 hover:bg-purple-200
}

.list-elegant-purple-active {
    @apply bg-purple-100 border-opacity-100 text-purple-700 text-opacity-80 hover:bg-purple-200 hover:text-gray-700 hover:text-opacity-80
}

/*Red*/
.list-elegant-red {
    @apply bg-red-50 text-gray-700 text-opacity-80 border-red-300 hover:bg-red-200
}

.list-elegant-red-active {
    @apply bg-red-100 border-opacity-100 text-red-700 text-opacity-80 hover:bg-red-200 hover:text-gray-700 hover:text-opacity-80
}

/*White*/
.list-elegant-white {
    @apply bg-white text-gray-700 text-opacity-80 border-gray-300 hover:bg-gray-200
}

.list-elegant-white-active {
    @apply bg-gray-100 border-opacity-100 text-gray-700 text-opacity-80 hover:bg-gray-200 hover:text-gray-700 hover:text-opacity-80
}

/*Yellow*/
.list-elegant-yellow {
    @apply bg-yellow-50 text-gray-700 text-opacity-80 border-yellow-300 hover:bg-yellow-200
}

.list-elegant-yellow-active {
    @apply bg-yellow-100 border-opacity-100 text-yellow-700 text-opacity-80 hover:bg-yellow-200 hover:text-gray-700 hover:text-opacity-80
}

/*</editor-fold>*/

/*<editor-fold desc="Filled Style">*/
/*General Definitions*/
.list-simple-base {
    @apply px-2 py-1 font-semibold border-b last:border-b-0
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.list-simple-black {
    @apply border-gray-800 hover:bg-gray-300 hover:border-transparent hover:text-gray-700 focus:bg-gray-300 focus:text-gray-700
}

.list-simple-black-active {
    @apply font-bold text-gray-700 hover:bg-gray-300 hover:text-gray-700
}

/*Blue*/
.list-simple-blue {
    @apply border-blue-200 hover:bg-blue-50 hover:border-transparent hover:text-blue-700 focus:bg-blue-200 focus:text-blue-700
}

.list-simple-blue-active {
    @apply text-blue-700 hover:bg-blue-50 hover:text-blue-700
}

/*Gray*/
.list-simple-gray {
    @apply border-gray-200 hover:bg-gray-200 hover:border-transparent hover:text-gray-700 focus:bg-gray-200 focus:text-gray-700
}

.list-simple-gray-active {
    @apply font-bold text-gray-700 hover:bg-gray-200 hover:text-gray-700
}

/*Green*/
.list-simple-green {
    @apply border-green-200 hover:bg-green-50 hover:border-transparent hover:text-green-700 focus:bg-green-200 focus:text-green-700
}

.list-simple-green-active {
    @apply text-green-700 hover:bg-green-50 hover:text-green-700
}

/*Indigo*/
.list-simple-indigo {
    @apply border-indigo-200 hover:bg-indigo-50 hover:border-transparent hover:text-indigo-700 focus:bg-indigo-200 focus:text-indigo-700
}

.list-simple-indigo-active {
    @apply text-indigo-700 hover:bg-indigo-50 hover:text-indigo-700
}

/*Pink*/
.list-simple-pink {
    @apply border-pink-200 hover:bg-pink-50 hover:border-transparent hover:text-pink-700 focus:bg-pink-200 focus:text-pink-700
}

.list-simple-pink-active {
    @apply text-pink-700 hover:bg-red-50 hover:text-pink-700
}

/*Purple*/
.list-simple-purple {
    @apply border-purple-200 hover:bg-purple-50 hover:border-transparent hover:text-purple-700 focus:bg-purple-200 focus:text-purple-700
}

.list-simple-purple-active {
    @apply text-purple-700 hover:bg-purple-50 hover:text-purple-700
}

/*Red*/
.list-simple-red {
    @apply border-red-200 hover:bg-red-50 hover:border-transparent hover:text-red-700 focus:bg-red-200 focus:text-red-700
}

.list-simple-red-active {
    @apply text-red-700 hover:bg-red-50 hover:text-red-700
}

/*White*/
.list-simple-white {
    @apply border-gray-200 hover:bg-white hover:border-transparent hover:text-gray-700 focus:bg-white focus:text-gray-700
}

.list-simple-white-active {
    @apply font-bold text-gray-700 hover:bg-white hover:text-gray-700
}

/*Yellow*/

.list-simple-yellow {
    @apply bg-yellow-500 border-yellow-300 border-opacity-50 hover:bg-yellow-200 hover:text-yellow-700 focus:bg-yellow-200 focus:text-yellow-700
}

.list-simple-yellow-active {
    @apply bg-yellow-100 border-opacity-100 text-yellow-700 hover:bg-yellow-200 hover:text-yellow-700
}

/*</editor-fold>*/


================================================
FILE: resources/css/components/loading.css
================================================
.loading-screen {
    @apply fixed flex h-screen w-screen top-0 justify-center items-center left-0;
    z-index: 99999999;
}
.loading-screen-content {
    @apply flex flex-col text-white justify-between items-center h-screen
}
.loading-screen-content #wrapper{
    @apply flex flex-col h-full space-y-8 justify-center items-center
}
.loading-screen-content #title {
    @apply flex text-4xl md:text-7xl filter drop-shadow-lg text-center
}
.loading-screen-content #message {
    @apply flex text-xl md:text-4xl filter drop-shadow-lg text-center
}
.loading-screen-content #animation {
    @apply flex justify-center items-center h-28 mb-8 -mt-28
}
.loading-screen #custom-content {
    @apply flex text-white justify-center items-center h-screen w-full
}
.loading-screen-content + .loading-black , .loading-blue , .loading-gray , .loading-green , .loading-indigo , .loading-pink , .loading-red , .loading-purple, .loading-yellow {
@apply bg-gray-50 text-gray-50
}
.loading-screen-close {
    @apply fixed flex right-12 rounded-md top-12 bg-gray-50 border-4 border-gray-400 hover:border-red-500 hover:text-red-500 cursor-pointer transition-all duration-300 ease-in-out;
}
.loading-screen-countdown {
    @apply absolute top-0 w-screen h-2 bg-gray-50 bg-opacity-90 transition-all
}
.loading-screen-countdown #countdown {
    @apply h-2
}

/*Animations*/
.loading-cogs-container{
    @apply flex justify-center
}
.loading-cogs-second{
    @apply mt-8 -ml-4
}
.loading-three-bars{
    @apply relative flex flex-shrink-0 flex-grow-0 h-4 justify-between space-x-1
}
.loading-three-dots{
    @apply relative flex flex-wrap flex-shrink-0 flex-grow-0 h-full justify-between items-center space-x-0.5;
}

/*<editor-fold desc="Loading Screen Color Styles">*/
/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.loading-screen-black {
    @apply bg-gray-800 bg-opacity-90
}
.loading-screen-black #countdown {
    @apply bg-gray-800
}

/*Blue*/
.loading-screen-blue {
    @apply bg-blue-500 bg-opacity-90
}
.loading-screen-blue #countdown {
    @apply bg-blue-500
}

/*Gray*/
.loading-screen-gray {
    @apply bg-gray-500 bg-opacity-90
}
.loading-screen-gray #countdown {
    @apply bg-gray-500
}

/*Green*/
.loading-screen-green {
    @apply bg-green-500 bg-opacity-90
}
.loading-screen-green #countdown {
    @apply bg-green-500
}

/*Indigo*/
.loading-screen-indigo {
    @apply bg-indigo-500 bg-opacity-90
}
.loading-screen-indigo #countdown {
    @apply bg-indigo-500
}

/*Pink*/
.loading-screen-pink {
    @apply bg-pink-500 bg-opacity-90
}
.loading-screen-pink #countdown {
    @apply bg-pink-500
}

/*Purple*/
.loading-screen-purple {
    @apply bg-purple-500 bg-opacity-90
}
.loading-screen-purple #countdown {
    @apply bg-purple-500
}

/*Red*/
.loading-screen-red {
    @apply bg-red-500 bg-opacity-90
}
.loading-screen-red #countdown {
    @apply bg-red-500
}

/*White*/
.loading-screen-white {
    @apply bg-gray-100 bg-opacity-90 text-gray-600
}
.loading-screen-white #countdown {
    @apply bg-gray-200
}
.loading-screen-white #title, .loading-screen-white #message{
    @apply text-gray-600 !important
}
.loading-screen-white .loading-white {
    @apply bg-gray-800 text-gray-600
}

/*Yellow*/
.loading-screen-yellow {
    @apply bg-yellow-500 bg-opacity-90
}
.loading-screen-yellow #countdown {
    @apply bg-yellow-500
}

/*</editor-fold>*/


================================================
FILE: resources/css/components/modal.css
================================================
.modal-container {
    @apply fixed top-0 left-0 inset-0 flex h-screen w-full md:w-screen overflow-hidden justify-center items-center bg-gray-500 z-50 backdrop-filter backdrop-blur-sm
}

.modal-box {
    @apply relative flex flex-col md:min-w-[3rem] md:max-w-2xl
}

.modal-header {
    @apply relative flex flex-row z-10
}

.modal-actions-container {
    @apply flex flex-row h-10
}

.modal-action-buttons {
    @apply flex flex-row justify-center items-center px-1 my-1 space-x-1 border rounded-full
}

.modal-close-button {
    @apply flex justify-center items-center hover:text-red-500 focus:text-red-700 h-full cursor-pointer
}

.modal-content-container {
    @apply flex flex-col justify-center items-center px-16 pt-8
}

.modal-custom-content-container {
    @apply flex items-center p-4
}

.modal-content {
    @apply text-center space-y-4 w-full
}

.modal-content-default {
    @apply text-xl text-center
}

.modal-icon {
    @apply flex pb-4
}

.modal-icon-default {
    @apply h-28 w-28
}

.modal-footer-container {
    @apply flex justify-between w-full p-4  whitespace-normal
}

.modal-countdown {
    @apply absolute top-0 w-screen h-2 bg-gray-50 bg-opacity-60 transition-all
}
#countdown {
    @apply h-2
}

.modal-countdown #close {
    @apply h-2
}

.modal-footer-item {
    @apply flex flex-wrap space-x-2
}

.modal-footer-left {
    @apply inline-flex flex-grow space-x-2 justify-start
}

.modal-footer-center {
    @apply inline-flex flex-grow space-x-2 justify-center
}

.modal-footer-right {
    @apply inline-flex flex-grow space-x-2 justify-end
}

/*<editor-fold desc="Modal Background Color Styles">*/
/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.modal-container-black {
    @apply bg-gray-800 bg-opacity-75
}

.modal-container-black #countdown {
    @apply bg-gray-800
}

/*Blue*/
.modal-container-blue {
    @apply bg-blue-900 bg-opacity-75
}

.modal-container-blue #countdown {
    @apply bg-blue-500
}

/*Gray*/
.modal-container-gray {
    @apply bg-gray-500 bg-opacity-75
}

.modal-container-gray #countdown {
    @apply bg-gray-500
}

/*Green*/
.modal-container-green {
    @apply bg-green-900 bg-opacity-75
}

.modal-container-green #countdown {
    @apply bg-green-500
}

/*Indigo*/
.modal-container-indigo {
    @apply bg-indigo-900 bg-opacity-75
}

.modal-container-indigo #countdown {
    @apply bg-indigo-500
}

/*Pink*/
.modal-container-pink {
    @apply bg-pink-900 bg-opacity-75
}

.modal-container-pink #countdown {
    @apply bg-pink-500
}

/*Purple*/
.modal-container-purple {
    @apply bg-purple-900 bg-opacity-75
}

.modal-container-purple #countdown {
    @apply bg-purple-500
}

/*Red*/
.modal-container-red {
    @apply bg-red-900 bg-opacity-75
}

.modal-container-red #countdown {
    @apply bg-red-500
}

/*White*/
.modal-container-white {
    @apply bg-gray-50 bg-opacity-75
}

.modal-container-white #countdown {
    @apply bg-gray-500
}

/*Yellow*/
.modal-container-yellow {
    @apply bg-yellow-900 bg-opacity-75
}

.modal-container-yellow #countdown {
    @apply bg-yellow-500
}

/*</editor-fold>*/


/*<editor-fold desc="Filled Style">*/
.modal-filled-base {
    @apply text-white
}

.modal-filled-base .modal-header {
    @apply justify-between p-2 -mb-8 items-stretch
}

.modal-filled-base .modal-close-button {
    @apply ml-2 mt-1 bg-white text-red-500 rounded-full hover:bg-red-500 hover:text-white w-8 h-8
}

/*Title Styles*/
.modal-filled-base #content-title-container {
    @apply flex flex-col w-full text-center -mt-2 mb-4
}

.modal-filled-base #content-title {
    @apply text-3xl
}

.modal-filled-base #content-sub-title {
    @apply text-xl
}

.modal-filled-base .modal-icon-default {
    @apply bg-white bg-opacity-80 rounded-full
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.modal-filled-black {
    @apply bg-gray-700 border-black
}

/*Blue*/
.modal-filled-blue {
    @apply bg-blue-500 border-blue-500
}

/*Gray*/
.modal-filled-gray {
    @apply bg-gray-500 border-gray-500
}

/*Green*/
.modal-filled-green {
    @apply bg-green-500 border-green-500
}

/*Indigo*/
.modal-filled-indigo {
    @apply bg-indigo-500 border-indigo-500
}

/*Pink*/
.modal-filled-pink {
    @apply bg-pink-500 border-pink-500
}

/*Purple*/
.modal-filled-purple {
    @apply bg-purple-500 border-purple-500
}

/*Red*/
.modal-filled-red {
    @apply bg-red-500 border-red-500
}

/*White*/
.modal-filled-white {
    @apply bg-white border-gray-300 text-gray-700
}

/*Yellow*/
.modal-filled-yellow {
    @apply bg-yellow-500 border-yellow-400
}

/*</editor-fold>*/

/*<editor-fold desc="Elegant Style">*/

.modal-elegant-base {
    @apply flex
}

/*Dark Mode Styles*/
.modal-elegant-dark {
    @apply bg-gray-700 text-white
}

.modal-elegant-dark .modal-action-buttons {
    @apply border-white text-white
}

.modal-elegant-dark .box-close {
    @apply text-white
}

.modal-elegant-light {
    @apply bg-white text-gray-700
}

.modal-elegant-light .modal-action-buttons {
    @apply border-gray-700 text-gray-700
}

.modal-elegant-light .modal-close {
    @apply text-gray-700
}

/*Header Style*/
.modal-elegant-base .modal-header {
    @apply justify-between p-2 items-stretch
}

/*Title Styles*/
.modal-elegant-base #title-container {
    @apply flex flex-col justify-center
}

.modal-elegant-base #top-title {
    @apply text-3xl
}

.modal-elegant-base #top-sub-title {
    @apply text-xl
}

/*Seperator*/
.modal-elegant-base #header-separator {
    @apply flex h-1 mx-2 rounded-full
}


/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.modal-elegant-black #header-separator {
    @apply bg-gray-600
}

/*Blue*/
.modal-elegant-blue #header-separator {
    @apply bg-blue-500
}

/*Gray*/
.modal-elegant-gray #header-separator {
    @apply bg-gray-400
}

/*Green*/
.modal-elegant-green #header-separator {
    @apply bg-green-500
}

/*Indigo*/
.modal-elegant-indigo #header-separator {
    @apply bg-indigo-500
}

/*Pink*/
.modal-elegant-pink #header-separator {
    @apply bg-pink-500
}

/*Purple*/
.modal-elegant-purple #header-separator {
    @apply bg-purple-500
}

/*Red*/
.modal-elegant-red #header-separator {
    @apply bg-red-500
}

/*White*/
.modal-elegant-white #header-separator {
    @apply bg-gray-200
}

/*Yellow*/
.modal-elegant-yellow #header-separator {
    @apply bg-yellow-500
}

/*</editor-fold>*/


================================================
FILE: resources/css/components/pagination.css
================================================
/*Pagination*/
/*Pagination Container*/
.pagination-container {
    @apply flex flex-col-reverse my-2 md:flex-row md:mt-0 justify-center md:justify-between flex-shrink-0 w-full items-center ease-in-out duration-200 transition-all
}
/*Pagination Detail Text*/
.pagination-detail-container{
    @apply flex flex-row flex-shrink-0 mt-2 md:mt-0 items-center space-x-2 select-none
}
.pagination-detail-text{
    @apply flex flex-row flex-shrink-0
}
.pagination-detail-jump-container{
    @apply relative flex items-center
}
.pagination-detail-jump-input{
    @apply flex rounded-l-md h-6 ml-2 px-0 text-gray-700 text-center focus:ring-0
}
.pagination-detail-jump-button{
    @apply flex text-sm items-center px-0.5 cursor-pointer h-6 rounded-r-md
}
.pagination-counters {
    @apply inline-flex flex-shrink-0 justify-end items-center overflow-hidden ease-in-out duration-200 transition-all
}
/*Pagination Item*/
.pagination-item {
    @apply flex items-center justify-center h-8 px-2 cursor-pointer font-semibold select-none flex-shrink-0 ease-in-out duration-200 transition-all
}
.pagination-active-item {
    @apply flex items-center justify-center h-8 px-2 cursor-pointer font-semibold select-none flex-shrink-0 ease-in-out duration-200 transition-all
}
/*Left Right Navigation Arrows*/
.pagination-arrow, .pagination-passive-arrow  {
    @apply flex flex-shrink-0 items-center justify-center h-8 px-2 cursor-pointer font-semibold select-none
}
.pagination-passive-arrow{
    filter: blur(.03rem) opacity(.9);
}
.pagination-arrow-text{
    @apply hidden md:block
}

/*<editor-fold desc="Filled Style">*/
/*General Definitions*/
.pagination-filled-base .pagination-detail-jump-input{
    @apply border-none
}

.pagination-filled-base .pagination-counters {
    @apply text-white
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.pagination-filled-black  .pagination-item,.pagination-filled-black .pagination-arrow{
    @apply bg-gray-800 hover:bg-gray-300 hover:text-gray-700
}
.pagination-filled-black  .pagination-active-item{
    @apply bg-gray-600
}
.pagination-filled-black .pagination-passive-arrow{
    @apply  bg-gray-100 text-gray-500 cursor-not-allowed
}
.pagination-filled-black .pagination-detail-jump-input{
    @apply bg-gray-200 text-gray-700
}
.pagination-filled-black .pagination-detail-jump-button{
    @apply text-white bg-gray-800
}

/*Blue*/
.pagination-filled-blue  .pagination-item,.pagination-filled-blue .pagination-arrow{
    @apply bg-blue-500 hover:bg-blue-100 hover:text-blue-500
}
.pagination-filled-blue  .pagination-active-item{
    @apply bg-blue-700
}
.pagination-filled-blue .pagination-passive-arrow{
    @apply  bg-blue-100 text-blue-300 cursor-not-allowed
}
.pagination-filled-blue .pagination-detail-jump-input{
    @apply bg-blue-200 text-blue-500
}
.pagination-filled-blue .pagination-detail-jump-button{
    @apply text-white bg-blue-500
}

/*Gray*/
.pagination-filled-gray  .pagination-item,.pagination-filled-gray .pagination-arrow{
    @apply bg-gray-300 text-gray-700 hover:bg-gray-500 hover:text-white
}
.pagination-filled-gray  .pagination-active-item{
    @apply bg-gray-700
}
.pagination-filled-gray .pagination-passive-arrow{
    @apply  bg-gray-100 text-gray-300 cursor-not-allowed
}
.pagination-filled-gray .pagination-detail-jump-input{
    @apply bg-gray-200 text-gray-700
}
.pagination-filled-gray .pagination-detail-jump-button{
    @apply text-white bg-gray-500
}

/*Green*/
.pagination-filled-green  .pagination-item,.pagination-filled-green .pagination-arrow{
    @apply bg-green-500 hover:bg-green-100 hover:text-green-500
}
.pagination-filled-green  .pagination-active-item{
    @apply bg-green-700
}
.pagination-filled-green .pagination-passive-arrow{
    @apply  bg-green-100 text-green-300 cursor-not-allowed
}
.pagination-filled-green .pagination-detail-jump-input{
    @apply bg-green-200 text-green-500
}
.pagination-filled-green .pagination-detail-jump-button{
    @apply text-white bg-green-500
}

/*Indigo*/
.pagination-filled-indigo  .pagination-item,.pagination-filled-indigo .pagination-arrow{
    @apply bg-indigo-500 hover:bg-indigo-100 hover:text-indigo-500
}
.pagination-filled-indigo  .pagination-active-item{
    @apply bg-indigo-700
}
.pagination-filled-indigo .pagination-passive-arrow{
    @apply  bg-indigo-100 text-indigo-300 cursor-not-allowed
}
.pagination-filled-indigo .pagination-detail-jump-input{
    @apply bg-indigo-200 text-indigo-500
}
.pagination-filled-indigo .pagination-detail-jump-button{
    @apply text-white bg-indigo-500
}

/*Pink*/
.pagination-filled-pink  .pagination-item,.pagination-filled-pink .pagination-arrow{
    @apply bg-pink-500 hover:bg-pink-100 hover:text-pink-500
}
.pagination-filled-pink  .pagination-active-item{
    @apply bg-pink-700
}
.pagination-filled-pink .pagination-passive-arrow{
    @apply  bg-pink-100 text-pink-300 cursor-not-allowed
}
.pagination-filled-pink .pagination-detail-jump-input{
    @apply bg-pink-200 text-pink-500
}
.pagination-filled-pink .pagination-detail-jump-button{
    @apply text-white bg-pink-500
}

/*Purple*/
.pagination-filled-purple  .pagination-item,.pagination-filled-purple .pagination-arrow{
    @apply bg-purple-500 hover:bg-purple-100 hover:text-purple-500
}
.pagination-filled-purple  .pagination-active-item{
    @apply bg-purple-700
}
.pagination-filled-purple .pagination-passive-arrow{
    @apply  bg-purple-100 text-purple-300 cursor-not-allowed
}
.pagination-filled-purple .pagination-detail-jump-input{
    @apply bg-purple-200 text-purple-500
}
.pagination-filled-purple .pagination-detail-jump-button{
    @apply text-white bg-purple-500
}

/*Red*/
.pagination-filled-red  .pagination-item,.pagination-filled-red .pagination-arrow{
    @apply bg-red-500 hover:bg-red-100 hover:text-red-500
}
.pagination-filled-red  .pagination-active-item{
    @apply bg-red-700
}
.pagination-filled-red .pagination-passive-arrow{
    @apply  bg-red-100 text-red-300 cursor-not-allowed
}
.pagination-filled-red .pagination-detail-jump-input{
    @apply bg-red-200 text-red-500
}
.pagination-filled-red .pagination-detail-jump-button{
    @apply text-white bg-red-500
}

/*White*/
.pagination-filled-white  .pagination-item,.pagination-filled-white .pagination-arrow{
    @apply bg-white text-gray-700 hover:bg-gray-200 hover:text-gray-700
}
.pagination-filled-white  .pagination-active-item{
    @apply bg-gray-600
}
.pagination-filled-white .pagination-passive-arrow{
    @apply  text-gray-300 cursor-not-allowed
}
.pagination-filled-white .pagination-detail-jump-input{
    @apply bg-gray-200 border text-gray-500
}
.pagination-filled-white .pagination-detail-jump-button{
    @apply text-gray-500 border border-gray-500
}

/*Yellow*/
.pagination-filled-yellow  .pagination-item,.pagination-filled-yellow .pagination-arrow{
    @apply bg-yellow-500 hover:bg-yellow-100 hover:text-yellow-500
}
.pagination-filled-yellow  .pagination-active-item{
    @apply bg-yellow-700
}
.pagination-filled-yellow .pagination-passive-arrow{
    @apply  bg-yellow-100 text-yellow-300 cursor-not-allowed
}
.pagination-filled-yellow .pagination-detail-jump-input{
    @apply bg-yellow-200 text-yellow-500
}
.pagination-filled-yellow .pagination-detail-jump-button{
    @apply text-white bg-yellow-500
}

/*</editor-fold>*/

/*<editor-fold desc="Light Style">*/
/*General Definitions*/
.pagination-light-base {
    @apply hover:text-gray-50 py-1 px-2 font-semibold
}

.pagination-light-base .pagination-icon {
    @apply ml-2
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.pagination-light-black {
    @apply bg-gray-500 hover:bg-gray-800 text-gray-50 border-gray-800
}
.pagination-light-black .loading-black {
    @apply bg-gray-100
}

/*Blue*/
.pagination-light-blue {
    @apply bg-blue-200 hover:bg-blue-500 text-blue-700 border-blue-500
}
.pagination-light-blue .loading-blue {
    @apply bg-blue-500
}

/*Gray*/
.pagination-light-gray {
    @apply bg-gray-300 hover:bg-gray-500 text-gray-700 border-gray-500
}
.pagination-light-gray .loading-gray {
    @apply bg-gray-500
}

/*Green*/
.pagination-light-green {
    @apply bg-green-200 hover:bg-green-500 text-green-700 border-green-500
}
.pagination-light-green .loading-green {
    @apply bg-green-500
}

/*Indigo*/
.pagination-light-indigo {
    @apply bg-indigo-200 hover:bg-indigo-500 text-indigo-700 border-indigo-500
}
.pagination-light-indigo .loading-indigo {
    @apply bg-indigo-500
}

/*Pink*/
.pagination-light-pink {
    @apply bg-pink-200 hover:bg-pink-500 text-pink-700 border-pink-500
}
.pagination-light-pink .loading-pink {
    @apply bg-pink-500
}

/*Purple*/
.pagination-light-purple {
    @apply bg-purple-200 hover:bg-purple-500 text-purple-700 border-purple-500
}
.pagination-light-purple .loading-purple {
    @apply bg-purple-500
}

/*Red*/
.pagination-light-red {
    @apply bg-red-200 hover:bg-red-500 text-red-700 border-red-500
}
.pagination-light-red .loading-red {
    @apply bg-red-500
}

/*White*/
.pagination-light-white {
    @apply bg-gray-100 hover:bg-gray-500 text-gray-700 border-gray-300
}
.pagination-light-white .loading-white {
    @apply bg-gray-500
}

/*Yellow*/
.pagination-light-yellow {
    @apply bg-yellow-200 hover:bg-yellow-500 text-yellow-700 border-yellow-500
}
.pagination-light-yellow .loading-yellow {
    @apply bg-yellow-500
}

/*</editor-fold>*/

/*<editor-fold desc="Outline Style">*/
/*General Definitions*/
.pagination-outline-base {
    @apply border hover:text-gray-50 py-1 px-2 font-semibold
}

.pagination-outline-base .pagination-icon {
    @apply ml-2
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.pagination-outline-black {
    @apply hover:bg-gray-800 text-gray-800 border-gray-800
}
.pagination-outline-black .loading-black {
    @apply bg-gray-800
}

/*Blue*/
.pagination-outline-blue {
    @apply hover:bg-blue-500 text-blue-700 border-blue-500
}
.pagination-outline-blue .loading-blue {
    @apply bg-blue-500
}

/*Gray*/
.pagination-outline-gray {
    @apply hover:bg-gray-500 text-gray-700 border-gray-500
}
.pagination-outline-gray .loading-gray {
    @apply bg-gray-500
}

/*Green*/
.pagination-outline-green {
    @apply hover:bg-green-500 text-green-700 border-green-500
}
.pagination-outline-green .loading-green {
    @apply bg-green-500
}

/*Indigo*/
.pagination-outline-indigo {
    @apply hover:bg-indigo-500 text-indigo-700 border-indigo-500
}
.pagination-outline-indigo .loading-indigo {
    @apply bg-indigo-500
}

/*Pink*/
.pagination-outline-pink {
    @apply hover:bg-pink-500 text-pink-700 border-pink-500
}
.pagination-outline-pink .loading-pink {
    @apply bg-pink-500
}

/*Purple*/
.pagination-outline-purple {
    @apply hover:bg-purple-500 text-purple-700 border-purple-500
}
.pagination-outline-purple .loading-purple {
    @apply bg-purple-500
}

/*Red*/
.pagination-outline-red {
    @apply hover:bg-red-500 text-red-700 border-red-500
}
.pagination-outline-red .loading-red {
    @apply bg-red-500
}

/*White*/
.pagination-outline-white {
    @apply hover:bg-gray-200 text-gray-700 border-gray-300 hover:text-gray-700
}
.pagination-outline-white .loading-white {
    @apply bg-gray-300
}

/*Yellow*/
.pagination-outline-yellow {
    @apply hover:bg-yellow-500 text-yellow-700 border-yellow-500
}
.pagination-outline-yellow .loading-yellow {
    @apply bg-yellow-500
}

/*</editor-fold>*/

/*<editor-fold desc="Link Style">*/
/*General Definitions*/
.pagination-link-base {
    @apply font-semibold hover:font-bold hover:underline py-1 px-2
}

.pagination-link-base .pagination-icon {
    @apply ml-2
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.pagination-link-black {
    @apply text-gray-800
}
.pagination-link-black .loading-black {
    @apply bg-gray-800
}

/*Blue*/
.pagination-link-blue {
    @apply text-blue-700
}
.pagination-link-blue .loading-blue {
    @apply bg-blue-500
}

/*Gray*/
.pagination-link-gray {
    @apply text-gray-700
}
.pagination-link-gray .loading-gray {
    @apply bg-gray-500
}

/*Green*/
.pagination-link-green {
    @apply text-green-700
}
.pagination-link-green .loading-green {
    @apply bg-green-500
}

/*Indigo*/
.pagination-link-indigo {
    @apply text-indigo-700
}
.pagination-link-indigo .loading-indigo {
    @apply bg-indigo-500
}

/*Pink*/
.pagination-link-pink {
    @apply text-pink-700
}
.pagination-link-pink .loading-pink {
    @apply bg-pink-500
}

/*Purple*/
.pagination-link-purple {
    @apply text-purple-700
}
.pagination-link-purple .loading-purple {
    @apply bg-purple-500
}

/*Red*/
.pagination-link-red {
    @apply text-red-700
}
.pagination-link-red .loading-red {
    @apply bg-red-500
}

/*White*/
.pagination-link-white {
    @apply text-gray-700
}
.pagination-link-white .loading-white {
    @apply bg-gray-300
}

/*Yellow*/
.pagination-link-yellow {
    @apply text-yellow-700
}
.pagination-link-yellow .loading-yellow {
    @apply bg-yellow-500
}

/*</editor-fold>*/

/*<editor-fold desc="Link Plus Style">*/
/*General Definitions*/
.pagination-link-plus-base {
    @apply font-semibold hover:text-gray-50 hover:underline py-1 px-2
}

.pagination-link-plus-base .pagination-icon {
    @apply ml-2
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.pagination-link-plus-black {
    @apply text-gray-800 hover:bg-gray-800
}
.pagination-link-plus-black .loading-black {
    @apply bg-gray-800
}

/*Blue*/
.pagination-link-plus-blue {
    @apply text-blue-700 hover:bg-blue-500
}
.pagination-link-plus-blue .loading-blue {
    @apply bg-blue-500
}

/*Gray*/
.pagination-link-plus-gray {
    @apply text-gray-700 hover:bg-gray-500
}
.pagination-link-plus-gray .loading-gray {
    @apply bg-gray-500
}

/*Green*/
.pagination-link-plus-green {
    @apply text-green-700 hover:bg-green-500
}
.pagination-link-plus-green .loading-green {
    @apply bg-green-500
}

/*Indigo*/
.pagination-link-plus-indigo {
    @apply text-indigo-700 hover:bg-indigo-500
}
.pagination-link-plus-indigo .loading-indigo {
    @apply bg-indigo-500
}

/*Pink*/
.pagination-link-plus-pink {
    @apply text-pink-700 hover:bg-pink-500
}
.pagination-link-plus-pink .loading-pink {
    @apply bg-pink-500
}

/*Purple*/
.pagination-link-plus-purple {
    @apply text-purple-700 hover:bg-purple-500
}
.pagination-link-plus-purple .loading-purple {
    @apply bg-purple-500
}

/*Red*/
.pagination-link-plus-red {
    @apply text-red-700 hover:bg-red-500
}
.pagination-link-plus-red .loading-red {
    @apply bg-red-500
}

/*White*/
.pagination-link-plus-white {
    @apply text-gray-700 hover:bg-gray-300 hover:text-gray-700
}
.pagination-link-plus-white .loading-white {
    @apply bg-gray-300
}

/*Yellow*/
.pagination-link-plus-yellow {
    @apply text-yellow-700 hover:bg-yellow-500
}
.pagination-link-plus-yellow .loading-yellow {
    @apply bg-yellow-500
}

/*</editor-fold>*/


================================================
FILE: resources/css/components/progress.css
================================================
.progress {
    @apply flex flex-col w-full
}

.progress-container {
    @apply flex flex-row justify-between text-sm
}

.progress-value {
    @apply flex w-full bg-gray-200 shadow-inner rounded-full overflow-hidden flex-shrink-0 flex-grow-0
}

.progress-counter-line {
    @apply flex transition-all duration-1000
}

/*<editor-fold desc="Progress Height Styles">*/
.progress-height-1 {
    @apply h-1
}

.progress-height-2 {
    @apply h-2
}

.progress-height-3 {
    @apply h-3
}

.progress-height-4 {
    @apply h-4
}

.progress-height-5 {
    @apply h-5
}

/*</editor-fold>*/

/*<editor-fold desc="Progress Color Styles">*/
/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.progress-black {
    @apply bg-gray-800
}

/*Blue*/
.progress-blue {
    @apply bg-blue-500
}

/*Gray*/
.progress-gray {
    @apply bg-gray-500
}

/*Green*/
.progress-green {
    @apply bg-green-500
}

/*Indigo*/
.progress-indigo {
    @apply bg-indigo-500
}

/*Pink*/
.progress-pink {
    @apply bg-pink-500
}

/*Purple*/
.progress-purple {
    @apply bg-purple-500
}

/*Red*/
.progress-red {
    @apply bg-red-500
}

/*White*/
.progress-white {
    @apply bg-white shadow-inner shadow-lg;
}

/*Yellow*/
.progress-yellow {
    @apply bg-yellow-500
}

/*</editor-fold>*/


================================================
FILE: resources/css/components/radius.css
================================================
.radius-0{
    @apply rounded-none
}
.radius-1{
    @apply rounded-sm
}
.radius-2{
    @apply rounded
}
.radius-3{
    @apply rounded-md
}
.radius-4{
    @apply rounded-lg
}
.radius-5{
    @apply rounded-xl
}
.radius-6{
    @apply rounded-2xl
}
.radius-7{
    @apply rounded-3xl
}
.radius-8{
    @apply rounded-full
}

/*<editor-fold desc="Seperated Corner Radius">*/
/*Top Left*/
.radius-tl-0{
    @apply rounded-tl-none
}
.radius-tl-1{
    @apply rounded-tl-sm
}
.radius-tl-2{
    @apply rounded-tl
}
.radius-tl-3{
    @apply rounded-tl-md
}
.radius-tl-4{
    @apply rounded-tl-lg
}
.radius-tl-5{
    @apply rounded-tl-xl
}
.radius-tl-6{
    @apply rounded-tl-2xl
}
.radius-tl-7{
    @apply rounded-tl-3xl
}
.radius-tl-8{
    @apply rounded-tl-full
}
/*Top Right*/
.radius-tr-0{
    @apply rounded-tr-none
}
.radius-tr-1{
    @apply rounded-tr-sm
}
.radius-tr-2{
    @apply rounded-tr
}
.radius-tr-3{
    @apply rounded-tr-md
}
.radius-tr-4{
    @apply rounded-tr-lg
}
.radius-tr-5{
    @apply rounded-tr-xl
}
.radius-tr-6{
    @apply rounded-tr-2xl
}
.radius-tr-7{
    @apply rounded-tr-3xl
}
.radius-tr-8{
    @apply rounded-tr-full
}
/*Bottom Left*/
.radius-bl-0{
    @apply rounded-bl-none
}
.radius-bl-1{
    @apply rounded-bl-sm
}
.radius-bl-2{
    @apply rounded-bl
}
.radius-bl-3{
    @apply rounded-bl-md
}
.radius-bl-4{
    @apply rounded-bl-lg
}
.radius-bl-5{
    @apply rounded-bl-xl
}
.radius-bl-6{
    @apply rounded-bl-2xl
}
.radius-bl-7{
    @apply rounded-bl-3xl
}
.radius-bl-8{
    @apply rounded-bl-full
}
/*Bottom Right*/
.radius-br-0{
    @apply rounded-br-none
}
.radius-br-1{
    @apply rounded-br-sm
}
.radius-br-2{
    @apply rounded-br
}
.radius-br-3{
    @apply rounded-br-md
}
.radius-br-4{
    @apply rounded-br-lg
}
.radius-br-5{
    @apply rounded-br-xl
}
.radius-br-6{
    @apply rounded-br-2xl
}
.radius-br-7{
    @apply rounded-br-3xl
}
.radius-br-8{
    @apply rounded-br-full
}
/*</editor-fold>*/

/*<editor-fold desc="Seperated Left-Right Side Radius">*/
/*Left*/
.radius-l-0{
    @apply rounded-l-none
}
.radius-l-1{
    @apply rounded-l-sm
}
.radius-l-2{
    @apply rounded-l
}
.radius-l-3{
    @apply rounded-l-md
}
.radius-l-4{
    @apply rounded-l-lg
}
.radius-l-5{
    @apply rounded-l-xl
}
.radius-l-6{
    @apply rounded-l-2xl
}
.radius-l-7{
    @apply rounded-l-3xl
}
.radius-l-8{
    @apply rounded-l-full
}
/*Right*/
.radius-r-0{
    @apply rounded-r-none
}
.radius-r-1{
    @apply rounded-r-sm
}
.radius-r-2{
    @apply rounded-r
}
.radius-r-3{
    @apply rounded-r-md
}
.radius-r-4{
    @apply rounded-r-lg
}
.radius-r-5{
    @apply rounded-r-xl
}
.radius-r-6{
    @apply rounded-r-2xl
}
.radius-r-7{
    @apply rounded-r-3xl
}
.radius-r-8{
    @apply rounded-r-full
}
/*Top*/
.radius-t-0{
    @apply rounded-t-none
}
.radius-t-1{
    @apply rounded-t-sm
}
.radius-t-2{
    @apply rounded-t
}
.radius-t-3{
    @apply rounded-t-md
}
.radius-t-4{
    @apply rounded-t-lg
}
.radius-t-5{
    @apply rounded-t-xl
}
.radius-t-6{
    @apply rounded-t-2xl
}
.radius-t-7{
    @apply rounded-t-3xl
}
.radius-t-8{
    @apply rounded-t-full
}
/*Bottom*/
.radius-b-0{
    @apply rounded-b-none
}
.radius-b-1{
    @apply rounded-b-sm
}
.radius-b-2{
    @apply rounded-b
}
.radius-b-3{
    @apply rounded-b-md
}
.radius-b-4{
    @apply rounded-b-lg
}
.radius-b-5{
    @apply rounded-b-xl
}
.radius-b-6{
    @apply rounded-b-2xl
}
.radius-b-7{
    @apply rounded-b-3xl
}
.radius-b-8{
    @apply rounded-b-full
}
/*</editor-fold>*/

/*<editor-fold desc="Group Radius">*/
.group-radius-0{
    @apply rounded-none
}
.group-radius-1{
    @apply first:rounded-t-sm last:rounded-b-sm
}
.group-radius-2{
    @apply first:rounded-t last:rounded-b
}
.group-radius-3{
    @apply first:rounded-t-md last:rounded-b-md
}
.group-radius-4{
    @apply first:rounded-t-lg last:rounded-b-lg
}
.group-radius-5{
    @apply first:rounded-t-xl last:rounded-b-xl
}
.group-radius-6{
    @apply first:rounded-t-2xl last:rounded-b-2xl
}
.group-radius-7{
    @apply first:rounded-t-3xl last:rounded-b-3xl
}
.group-radius-8{
    @apply first:rounded-t-full last:rounded-b-full
}
/*</editor-fold>*/


================================================
FILE: resources/css/components/statistic-box.css
================================================
/*Statistic Widget*/
.statistic-widget {
    @apply flex justify-between h-full w-full
}

.statistic-widget-data {
    @apply flex flex-col flex-grow
}

.statistic-widget-title {
    @apply text-lg font-semibold
}

.statistic-widget-value {
    @apply text-xl md:text-2xl xl:text-3xl font-bold py-2
}

.statistic-widget-diff-value {
    @apply flex items-center gap-1 max-w-min text-sm
}

.statistic-widget-icon-container {
    @apply flex flex-shrink-0 items-center overflow-hidden object-cover
}

.statistic-widget-icon {
    @apply flex items-center justify-center p-4 border-2 w-20 h-20 rounded-full
}

.statistic-widget-picture-container {
    @apply flex flex-shrink-0 items-center
}

.statistic-widget-picture {
    @apply flex items-center justify-center border-2 w-20 rounded-full object-cover overflow-hidden
}


================================================
FILE: resources/css/components/tab.css
================================================
.tab {
    @apply relative flex flex-col w-full
}

.tab-title-container {
    @apply relative flex flex-row justify-center md:justify-start overflow-x-scroll z-10 scrollbar-thin scrollbar-thumb-gray-500 scrollbar-track-gray-300
}

.tab-title {
    @apply flex items-center justify-center whitespace-nowrap space-x-1 items-center cursor-pointer transition duration-200 select-none
}

.tab-title-active {
    @apply flex items-center justify-center whitespace-nowrap space-x-1 items-center cursor-pointer transition duration-200 select-none font-semibold
}

.tab-content {
    @apply flex p-2 border
}

.tab-light .tab-content {
    @apply bg-gray-50 text-gray-700
}

.tab-dark .tab-content {
    @apply bg-gray-700 text-white
}

/*<editor-fold desc="Filled Style">*/
/*General Definitions*/
.tab-filled-base.tab-light .tab-title {
    @apply px-2 py-1 bg-gray-200 text-gray-400
}

.tab-filled-base.tab-dark .tab-title {
    @apply px-2 py-1 bg-gray-500 text-gray-300
}

.tab-filled-base .tab-title-active {
    @apply px-2 py-1 text-white
}

.tab-filled-base.tab-dark .tab-content{
    @apply border-none
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.tab-filled-black .tab-title-active {
    @apply bg-gray-700 border-black
}

/*Blue*/
.tab-filled-blue .tab-title-active {
    @apply bg-blue-500
}

/*Gray*/
.tab-filled-gray .tab-title-active {
    @apply bg-gray-500
}

.tab-dark.tab-filled-gray .tab-title-active {
    @apply bg-gray-600
}

/*Green*/
.tab-filled-green .tab-title-active {
    @apply bg-green-500
}

/*Indigo*/
.tab-filled-indigo .tab-title-active {
    @apply bg-indigo-500
}

/*Pink*/
.tab-filled-pink .tab-title-active {
    @apply bg-pink-500
}

/*Purple*/
.tab-filled-purple .tab-title-active {
    @apply bg-purple-500
}

/*Red*/
.tab-filled-red .tab-title-active {
    @apply bg-red-500
}

/*White*/
.tab-filled-white .tab-title-active {
    @apply bg-white text-gray-700
}

/*Yellow*/
.tab-filled-yellow .tab-title-active {
    @apply bg-yellow-500
}

/*</editor-fold>*/

/*<editor-fold desc="Underline Style">*/
/*General Definitions*/
.tab-underline-base .tab-title-container {
    @apply -mb-1
}
.tab-underline-base.tab-dark .tab-title-container {
    @apply mb-0
}

.tab-underline-base .tab-content {
    @apply border-t-4
}
.tab-underline-base.tab-dark .tab-content {
    @apply border-none
}

.tab-underline-base .tab-title {
    @apply px-2 py-1 border-b-4 border-transparent
}

.tab-underline-base .tab-title-active {
    @apply px-2 py-1 border-b-4
}


/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.tab-underline-black .tab-title-active {
    @apply border-gray-700
}

.tab-dark.tab-underline-black .tab-title-active {
    @apply border-black
}

/*Blue*/
.tab-underline-blue .tab-title-active {
    @apply border-blue-600 text-blue-600
}

/*Gray*/
.tab-underline-gray .tab-title-active {
    @apply border-gray-500
}

.tab-dark.tab-underline-gray .tab-title-active {
    @apply border-gray-400
}

/*Green*/
.tab-underline-green .tab-title-active {
    @apply border-green-600 text-green-600
}

/*Indigo*/
.tab-underline-indigo .tab-title-active {
    @apply border-indigo-600 text-indigo-600
}

/*Pink*/
.tab-underline-pink .tab-title-active {
    @apply border-pink-600 text-pink-600
}

/*Purple*/
.tab-underline-purple .tab-title-active {
    @apply border-purple-600 text-purple-600 !important
}

/*Red*/
.tab-underline-red .tab-title-active {
    @apply border-red-600 text-red-600
}

/*White*/
.tab-underline-white .tab-title-active {
    @apply border-gray-400
}

.tab-dark.tab-underline-white .tab-title-active {
    @apply border-gray-300
}

/*Yellow*/
.tab-underline-yellow .tab-title-active {
    @apply border-yellow-600 text-yellow-600
}

.tab-underline-simple-text {
    @apply text-gray-700 !important
}

/*</editor-fold>*/


================================================
FILE: resources/css/components/table.css
================================================
.table-outside-container {
    @apply w-full space-y-4
}

/*<editor-fold desc="Top Content">*/
.table-top {
    @apply flex justify-between
}
.table-top-left {
    @apply flex justify-start items-center space-x-2
}
.table-advanced-search-container{
    @apply flex flex-col p-4 space-y-4 border bg-white dark:border-transparent dark:bg-gray-800 dark:text-gray-200
}
.table-advanced-search-content-wrapper{
    @apply grid grid-cols-1 md:grid-cols-2 gap-4
}
/*</editor-fold>*/
.table-header-cell{
    @apply flex items-center font-semibold space-x-1 select-none
}
.table-container{
    @apply w-full ;
}
.table-content-cell{
    @apply px-4 py-2
}
.table-no-content{
    @apply flex justify-center items-center p-4 space-x-2
}
.table-paginator{
    @apply mt-4
}

/*<editor-fold desc="Elegant Style">*/
/*General Definitions*/
.table-elegant .table-header-cell{
    @apply px-4 py-2 text-sm dark:text-gray-200 uppercase leading-normal
}
.table-elegant .table-content-row{
    @apply bg-white dark:bg-gray-600 dark:text-gray-200
}
.table-elegant .table-content-zebra-row{
    @apply odd:bg-gray-300 dark:odd:bg-gray-500
}
.table-elegant .table-content-hover-row{
    @apply hover:bg-gray-500 hover:text-white dark:hover:bg-gray-300 dark:hover:text-gray-700
}
.table-elegant .table-content-border-row{
    @apply border-b last:border-b-0 dark:border-gray-500
}
.table-elegant .table-no-content{
    @apply bg-gray-200 bg-opacity-50
}
.table-elegant .table-simple-search-input {
    @apply bg-gray-700 text-white placeholder-gray-200
}
/*</editor-fold>*/


================================================
FILE: resources/css/components/toastr.css
================================================
/*Toastr*/
.toastr {
    @apply flex flex-row justify-between items-center shadow p-4 min-h-max
}

.toastr-close {
    @apply flex items-center justify-center w-5 h-5 rounded-full font-bold hover:bg-red-700 hover:text-white hover:bg-opacity-90 cursor-pointer
}


================================================
FILE: resources/css/components/tooltip.css
================================================
.tooltip, .tooltip:after, .tooltip:before{
    @apply inline-flex
}
.tooltip-container{
    @apply relative whitespace-normal select-none cursor-pointer
}

.tooltip-box{
    @apply absolute z-10 font-normal;
    filter: drop-shadow(0px 0px 2px #4a5568);
}

.tooltip-box-content{
    @apply bg-white dark:bg-slate-700 dark:text-slate-100 px-2 py-1 whitespace-nowrap z-50;
}
.tooltip-left-container{
    @apply right-full -top-4 mr-2 mt-2
}
.tooltip-left-arrow{
    @apply absolute border-slate-500 dark:border-slate-100 w-2 h-2 border-r-2 border-t-2 transform -right-1 top-4 rotate-45 z-10
}
.tooltip-right-container{
    @apply left-full -top-4 ml-2 mt-2
}
.tooltip-right-arrow{
    @apply absolute border-slate-500 dark:border-slate-100 w-2 h-2 border-l-2 border-b-2 transform -left-1 top-4 rotate-45 z-10
}
.tooltip-top-container{
    @apply left-0 bottom-6 mb-2
}
.tooltip-top-arrow{
    @apply absolute border-slate-500 dark:border-slate-100 w-2 h-2 bg-white border-b-2 border-r-2 transform left-4 -bottom-1 rotate-45 z-10
}
.tooltip-bottom-container{
    @apply top-6 mt-2
}
.tooltip-bottom-arrow{
    @apply absolute border-slate-500 dark:border-slate-100 w-2 h-2 border-l-2 border-t-2 transform left-4 -top-1 rotate-45 z-10
}

.tooltip-bold{
    @apply font-bold
}


/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.tooltip-black .tooltip-box-title,.tooltip-black .tooltip-arrow {
    @apply bg-gray-800 border-transparent
}

/*Blue*/
.tooltip-blue .tooltip-box-title,.tooltip-blue .tooltip-arrow {
    @apply bg-blue-500 border-transparent
}

/*Gray*/
.tooltip-gray .tooltip-box-title,.tooltip-gray .tooltip-arrow {
    @apply bg-gray-500 border-transparent
}

/*Green*/
.tooltip-green .tooltip-box-title,.tooltip-green .tooltip-arrow {
    @apply bg-green-500 border-transparent
}

/*Indigo*/
.tooltip-indigo .tooltip-box-title,.tooltip-indigo .tooltip-arrow {
    @apply bg-indigo-500 border-transparent
}

/*Pink*/
.tooltip-pink .tooltip-box-title,.tooltip-pink .tooltip-arrow {
    @apply bg-pink-500 border-transparent
}

/*Purple*/
.tooltip-purple .tooltip-box-title,.tooltip-purple .tooltip-arrow {
    @apply bg-purple-500 border-transparent
}

/*Red*/
.tooltip-red .tooltip-box-title,.tooltip-red .tooltip-arrow {
    @apply bg-red-500 border-transparent
}

/*White*/
.tooltip-white .tooltip-box-title {
    @apply bg-gray-200 text-gray-700 border-b border-gray-500
}
.tooltip-white .tooltip-arrow{
    @apply bg-white dark:bg-slate-700
}

/*Yellow*/
.tooltip-yellow .tooltip-box-title,.tooltip-yellow .tooltip-arrow {
    @apply bg-yellow-500
}


================================================
FILE: resources/css/components/vertical-menu.css
================================================
/*Initial Vertical Menu*/
.ivm {
    @apply flex flex-col md:flex-row items-center max-h-min w-full px-2 py-2 overflow-hidden
}

.ivm-container {
    @apply flex flex-col md:flex-row w-full gap-2
}

.ivm-item {
    @apply bg-opacity-0 hover:bg-opacity-100 items-center justify-center px-3 py-2 gap-2 whitespace-nowrap h-full w-full md:max-w-min font-bold cursor-pointer transition duration-300 ease-in-out
}


================================================
FILE: resources/css/layout/footer.css
================================================
/*Footer*/
.footer {
    @apply flex flex-wrap flex-shrink-0 items-center py-2 px-6 justify-center md:justify-end space-x-1 text-sm font-semibold text-right text-gray-500 w-full
}


================================================
FILE: resources/css/layout/full-screen-layout.css
================================================
/*Full Screen Card*/
.full-screen-card {
    @apply relative flex h-screen w-screen
}

/*Full Screen Card Container*/
.full-screen-card-container {
    @apply absolute h-screen w-screen bg-cover z-10
}

/*Full Screen Card Content*/
.full-screen-card-content {
    @apply flex w-full items-center justify-center z-20
}


================================================
FILE: resources/css/layout/main-menu.css
================================================
/*<editor-fold desc="Umay Main Menu">*/
.umay-main-menu {
    @apply flex flex-col flex-shrink-0 justify-between w-72 h-screen bg-gray-800 relative transition-size-medium
}

/*<editor-fold desc="Main Menu Header">*/
.umay-main-menu .header {
    @apply flex flex-shrink-0 h-16 px-3 m-4;
}

.umay-main-menu .logo-out-container {
    @apply flex justify-center w-full
}

.umay-main-menu .logo-inside-container {
    @apply flex items-center overflow-hidden
}

.umay-main-menu #logo {
    @apply flex flex-shrink-0 w-10
}

.umay-main-menu #logo-title {
    @apply flex flex-shrink-0 text-3xl h-10 items-center leading-normal transition-size-medium
}

/*</editor-fold>*/
/*<editor-fold desc="Let Menu Links">*/
.umay-main-menu #links-wrapper {
    @apply h-full bg-gray-800 px-4 overflow-x-hidden overflow-y-scroll scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-800 transition-size-long overflow-hidden

}

/*Root Link*/
.umay-main-menu #link {
    @apply overflow-hidden bg-gray-800 mb-2
}

.umay-main-menu-root-link {
    @apply relative z-20 inline-flex w-full border-none border-separate font-semibold cursor-pointer whitespace-nowrap select-none bg-gray-800 active:bg-gray-500 active:text-white transition-color-short transition-size-medium overflow-hidden
}

.umay-main-menu-root-link-active {
    @apply bg-white hover:bg-gray-400 text-gray-700 transition-color-short
}

.umay-main-menu-root-link-passive {
    @apply text-gray-200 bg-gray-800 hover:text-gray-700 hover:bg-gray-100
}

.umay-main-menu-root-link-fold {
    @apply justify-center p-4 space-x-0
}

.umay-main-menu-root-link-expand {
    @apply justify-start p-2 space-x-1
}

.umay-main-menu-label-wrapper {
    @apply flex justify-between items-center transition-size-long overflow-hidden
}

.umay-main-menu-root-link #trigger {
    @apply flex items-center justify-center
}

.umay-main-menu-root-link #trigger-icon {
    @apply w-6 h-6 transform transition-size-short
}

/*Sub Links*/
.umay-main-menu-sub-links-wrapper {
    @apply flex flex-col bg-gray-100 bg-opacity-10 transition-size-long overflow-hidden
}

.umay-main-menu-sub-link {
    @apply relative inline-flex flex-shrink-0 p-2 items-center w-full whitespace-nowrap cursor-pointer active:bg-gray-500 active:text-white transition-color-short overflow-hidden
}

.umay-main-menu-sub-link-active {
    @apply bg-white bg-opacity-60 hover:bg-opacity-25 text-gray-800 hover:text-white font-bold
}

.umay-main-menu-sub-link-passive {
    @apply text-gray-200 hover:text-white bg-opacity-10 hover:bg-gray-200 hover:bg-opacity-25
}

.umay-main-menu-sub-link-fold {
    @apply justify-center p-4 space-x-0
}

.umay-main-menu-sub-link-expand {
    @apply justify-start p-2 space-x-1
}

.umay-main-menu-icon {
    @apply flex flex-shrink-0 justify-center items-center w-6 h-6
}

/*</editor-fold>*/
/*<editor-fold desc="Main Menu Footer">*/
.umay-main-menu #footer {
    @apply flex flex-shrink-0 justify-center items-center w-full overflow-hidden
}

.umay-main-menu #footer-links-wrapper {
    @apply grid grid-flow-row auto-cols-max auto-rows-min w-full m-4 justify-center items-center overflow-hidden
}

.umay-main-menu #footer-link {
    @apply flex items-center px-2 py-2 text-white bg-gray-100 bg-opacity-10 hover:text-gray-700 hover:bg-gray-100 hover:bg-opacity-75 focus:text-gray-400 focus:bg-gray-700 space-x-1 transition-color-short overflow-hidden
}

.umay-main-menu #footer-trigger {
    @apply flex flex-shrink-0 w-full m-4 justify-center items-center text-white cursor-pointer transform hover:scale-110
}

.umay-main-menu-trigger-icon {
    @apply w-8 h-8
}

/*</editor-fold>*/
/*<editor-fold desc="Main Menu Transitions">*/
.umay-main-menu-show {
    @apply m-0 opacity-100
}

.umay-main-menu-hide {
    @apply -ml-72 opacity-0
}

.umay-main-menu-fold {
    @apply w-[6.5rem]
}

.umay-main-menu-expand {
    @apply w-80
}

.umay-main-menu-title-show {
    @apply max-w-sm opacity-100 ml-1
}

.umay-main-menu-title-hide {
    @apply ml-0 max-w-min opacity-0
}

/*</editor-fold>*/
/*</editor-fold>*/

/*<editor-fold desc="Abay Main Menu">*/
.abay-main-menu{
    @apply relative bg-slate-50 dark:bg-slate-800 z-20 flex flex-col w-28 dark:border-slate-600 px-4 text-slate-700 dark:text-slate-200 select-none transition-size-medium
}

.abay-main-menu-show {
    @apply m-0 opacity-100
}

.abay-main-menu-root-wrapper{
    @apply flex flex-col flex-shrink-0 items-center justify-center w-20 py-[.5rem] rounded-md text-center cursor-pointer hover:bg-slate-100/10 transition-color-short
}

.abay-main-menu-root-link{
    @apply flex flex-col justify-center items-center space-y-1
}

.abay-main-menu-hide {
    @apply -ml-28 opacity-0
}
/*</editor-fold>*/


================================================
FILE: resources/css/layout/main.css
================================================
.main-container {
    @apply flex justify-between bg-gray-100 h-screen dark:bg-gray-700 overflow-hidden
}

.content-wrapper {
    @apply flex flex-col flex-shrink-0 sm:flex-shrink min-h-screen flex-grow p-4 space-y-6 overflow-y-auto  w-screen sm:w-full;
}

.content-container {
    @apply relative flex flex-col flex-grow justify-between space-y-6 w-full;
}

/*Content Container -> Content Header*/
.container-header {
    @apply flex flex-col lg:justify-between items-center md:flex-row;
}

/*Content Header -> Page Header*/
.container-header .page-header {
    @apply flex flex-col flex-grow;
}

.page-header .page-title {
    @apply mb-2 text-2xl lg:text-4xl font-semibold  dark:text-gray-200;
}

.page-header .page-subtitle {
    @apply hidden md:block md:text-xl text-gray-600 ml-0.5 text-2xl font-semibold  dark:text-gray-400;
}

.container-header .page-action-buttons {
    @apply flex flex-row items-center space-x-1;
}


================================================
FILE: resources/css/layout/top-bar.css
================================================
.top-menu {
    @apply flex flex-shrink-0 flex-grow-0 justify-between items-center h-16 px-4 bg-white dark:bg-gray-800 shadow-md dark:text-gray-200;
}

.top-menu .dropdown-container {
    @apply bg-white dark:bg-gray-800 dark:text-gray-200 dark:drop-shadow-md shadow mt-2 rounded-md overflow-hidden;
}

.top-menu .dropdown-header {
    @apply block px-4 py-2 text-xs text-gray-400 dark:text-gray-200
}

.top-menu .dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-500 dark:text-white font-semibold text-left hover:bg-gray-200 dark:hover:bg-opacity-10 w-full
}

.top-menu .dropdown-item-separator {
    @apply border-t border-gray-200 dark:border-gray-600
}

.top-menu .lang-selector-container {
    @apply flex flex-wrap px-4 py-1 w-full justify-center items-center;
}
.top-menu .lang-selector-item {
    @apply transform hover:scale-110 p-1 transition-size-short;
}

.top-menu .lang-icon {
    @apply w-8 h-8 cursor-pointer;
}

.top-menu .theme-icon {
    @apply w-6 h-6 cursor-pointer;
}

.top-menu .logout-button {
    @apply flex justify-center w-full px-4 py-2 bg-white hover:bg-red-500 text-red-500 hover:text-white dark:bg-red-500 dark:hover:bg-red-500 dark:hover:bg-opacity-50  dark:hover:text-white dark:text-white inline-flex h-full space-x-1 items-center focus:outline-none font-semibold cursor-pointer;
}

/*<editor-fold desc="Top Menu Trigger">*/
.top-menu .trigger {
    @apply flex flex-shrink-0 p-2 justify-center items-center h-10 w-10 hover:bg-gray-200 dark:hover:bg-opacity-10 active:bg-gray-300 cursor-pointer overflow-hidden transition-color-short;
}

.top-menu .trigger-icon {
    @apply flex-shrink-0 hover:scale-110 active:scale-90 transform transition-size-short;
}

.top-menu .trigger-icon-show {
    @apply w-8 h-8 opacity-100 scale-100;
}

.top-menu .trigger-icon-hide {
    @apply w-0 h-0 opacity-0 scale-0;
}

/*</editor-fold>*/

/*<editor-fold desc="Top Menu Search Box">*/
.top-menu .search-box {
    @apply flex flex-grow md:flex-grow-0 justify-start mr-2;
}
.top-menu .search-box-wrapper {
    @apply p-2 w-10 h-10 hover:bg-gray-200 dark:hover:bg-opacity-10 active:bg-gray-300 cursor-pointer transition-color-short;
}

.search-box .search-icon {
    @apply h-6 w-6 transform hover:scale-110 active:scale-90 transition-size-short;
}
.search-modal{
    @apply w-2/3 md:w-1/2 bg-white dark:bg-gray-800 shadow-lg p-4 bg-opacity-90
}
.search-modal #search{
    @apply w-full dark:bg-gray-600 dark:text-gray-200 rounded-md text-xl text-center text-gray-600
}


/*</editor-fold>*/

/*<editor-fold desc="Top Menu Active Team">*/
.top-menu .active-team {
    @apply hidden md:flex flex-grow justify-start items-center overflow-hidden
}
.top-menu .active-team-wrapper{
    @apply flex justify-between items-center space-x-2 p-2 rounded-md border border-gray-300 dark:border-gray-600 text-gray-600 bg-opacity-50 dark:text-gray-400 overflow-hidden
}
.top-menu .active-team-label {
    @apply flex whitespace-nowrap font-semibold overflow-hidden
}
/*</editor-fold>*/

/*<editor-fold desc="Top Menu Notification">*/
.top-menu .notification-box {
    @apply relative flex justify-center items-center p-2 w-10 w-10 h-10 hover:bg-slate-500/10 dark:hover:bg-slate-500/50 active:bg-gray-300 cursor-pointer;
}

.top-menu .notification-icon {
    @apply flex-shrink-0 w-6 h-6 hover:scale-110 active:scale-90 transform transition-size-short;
}

.top-menu .notification-ping {
    @apply absolute top-0 right-0 w-2 h-2 mt-1 mr-2 bg-red-500 rounded-full
}
/*</editor-fold>*/

/*<editor-fold desc="Top Menu User Menu">*/
.top-menu .user-menu-trigger {
    @apply inline-flex items-center md:space-x-2 px-2
}

.user-menu-trigger .staff-info {
    @apply hidden md:flex md:flex-col items-center pt-1 leading-tight;
}

.user-menu-trigger .staff-name {
    @apply flex justify-end w-full font-semibold whitespace-nowrap ;
}

.staff-info .staff-title {
    @apply flex justify-end w-full text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap ;
}

.staff-photo .trigger-button {
    @apply flex text-sm transition duration-150 ease-in-out border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300;
}

.staff-photo img {
    @apply object-cover w-full h-full rounded-full;
}

.user-menu .dropdown-list-container {
    @apply bg-white dark:bg-gray-700 dark:text-white shadow mt-2 rounded-md overflow-hidden;
}



.top-menu .action-section {
    @apply flex p-1 gap-2;
}

.action-section .trigger-button {
    @apply relative p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 focus:bg-gray-100 rounded-full focus:text-gray-600 focus:border-gray-300 focus:outline-none;
}



.theme-changer-container {
    @apply flex justify-center space-x-2 py-2 mx-auto items-center
}

.theme-changer-button {
    @apply flex justify-around p-1 items-center space-x-1 rounded-full font-semibold rounded-full text-gray-600 dark:text-white text-sm cursor-pointer overflow-hidden
}
/*Auto*/
.theme-changer-button-auto {
    @apply text-blue-600 dark:text-blue-600
}
.theme-changer-button-auto-active {
    @apply bg-blue-500 text-white
}
/*Dark*/
.theme-changer-button-dark {
    @apply text-gray-600
}
.theme-changer-button-dark-active {
    @apply bg-gray-700 text-white
}
/*Light*/
.theme-changer-button-light {
    @apply text-yellow-600 dark:text-yellow-600;
}
.theme-changer-button-light-active {
     @apply bg-yellow-500 shadow-sm text-white;
 }
.theme-changer-button-text {
    @apply transition-size-long
}

/*</editor-fold>*/

.top-menu-dropdown-trigger-transparent{
    @apply flex justify-center items-center cursor-pointer w-10 h-10 hover:bg-slate-500/10 dark:hover:bg-slate-500/50
}

.top-menu-dropdown-content-wrapper-transparent{
    @apply flex flex-col mt-3
}

.top-menu-dropdown-header-transparent{
    @apply flex items-center text-sm font-semibold whitespace-nowrap space-x-2 px-2 py-1 bg-white text-slate-700 dark:text-slate-100 shadow-xl border-transparent dark:bg-gray-800/95 first:rounded-t active:scale-95 border-l border-b-0 border-r first:border-t dark:border-gray-500 cursor-pointer select-none transition duration-300
}

.top-menu-dropdown-item-transparent{
    @apply flex items-center whitespace-nowrap space-x-2 px-2 py-1 bg-white text-slate-600 dark:text-slate-100 hover:bg-slate-200 shadow-xl border-slate-200/90 dark:bg-gray-800/95 dark:hover:bg-slate-600/90 first:rounded-t active:scale-95 last:rounded-b border-l border-b border-r first:border-t dark:border-gray-500 cursor-pointer select-none transition duration-300
}

.top-menu-dropdown-header{
    @apply flex items-center text-sm font-semibold whitespace-nowrap space-x-2 px-2 py-1 bg-white text-slate-700 dark:text-slate-100 shadow-xl border-transparent dark:bg-gray-800/95 active:scale-95 border-l border-r dark:border-gray-500 cursor-pointer select-none transition duration-300
}


.top-menu-dropdown-item{
    @apply flex items-center whitespace-nowrap space-x-2 px-2 py-1 bg-white text-slate-600 dark:text-slate-100 hover:bg-slate-200 shadow-xl border-transparent dark:bg-gray-800/95 dark:hover:bg-slate-600/90 active:scale-95 border-l border-r dark:border-gray-500 cursor-pointer select-none transition duration-300
}


================================================
FILE: resources/css/layout/top-menu.css
================================================


================================================
FILE: resources/css/misc/effect.css
================================================
/*Animations*/
/*Color*/
.transition-color-long {
    transition-property: background-color, color, border-color, text-shadow;
    transition-duration: 1000ms;
}

.transition-color-medium {
    transition-property: background-color, color, border-color, text-shadow;
    transition-duration: 700ms;
}

.transition-color-short {
    transition-property: background-color, color, border-color, text-shadow;
    transition-duration: 300ms;
}

/*Fade*/
.transition-size-long {
    transition-property: max-height, max-width, height, width, opacity, padding, margin, border-radius, transform;
    transition-duration: 1000ms;
}

.transition-size-medium {
    transition-property: max-height, max-width, height, width, opacity, padding, margin, border-radius, transform;
    transition-duration: 700ms;
}

.transition-size-short {
    transition-property: max-height, max-width, height, width, opacity, padding, margin, border-radius, transform;
    transition-duration: 300ms;
}

/*Show Hide Effects*/
.w-show {
    @apply w-full opacity-100
}

.w-hide {
    @apply w-0 opacity-0
}

.h-show {
    @apply h-full opacity-100
}

.h-hide {
    @apply h-0 opacity-0
}


================================================
FILE: resources/css/misc/highlighter.css
================================================
pre{
    @apply flex w-full
}

pre code.hljs{
    @apply block p-4
}

code.hljs{
    @apply flex w-full overflow-auto;
}

code.hljs::-webkit-scrollbar{
    @apply h-2 rounded-b-full;

}

code.hljs::-webkit-scrollbar-track-piece{
    @apply bg-slate-400/50 dark:bg-slate-500/50 mx-2 rounded-full
}


code.hljs::-webkit-scrollbar-track {
    @apply bg-transparent
}
code.hljs::-webkit-scrollbar-thumb {
    @apply bg-slate-500 dark:bg-slate-900 rounded-full
}

.hljs{
    @apply flex bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-300 overflow-hidden w-full
}
.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}

.hljs-doctag,.hljs-formula,.hljs-keyword{
    @apply text-pink-600
}

.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{
    @apply text-rose-500
}

.hljs-literal{color:#56b6c2}

.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}

.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}

.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}

.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}

.hljs-emphasis{font-style:italic}

.hljs-strong{font-weight:700}

.hljs-link{text-decoration:underline}


================================================
FILE: resources/js/Components/Alert/TAlert.vue
================================================
<template>
    <transition name="alert">
        <!--Alert Container-->
        <div
            v-if="showAlertBox"
            class="alert"
            :class="[
                `alert-${temporaryDesign}`,
                !type ? `alert-${temporaryDesign}-${temporaryColor}` :
                    [{ 'alert-success': type === 'success' },
                    { 'alert-warning': type === 'warning' },
                    { 'alert-danger': type === 'error' },
                    { 'alert-info': type === 'info' }],
                `radius-${temporaryRadius}`,
            ]"
        >
            <!--Alert Line-->
            <div v-if="temporaryDesign.includes('line')" class="alert-line" />

            <!--Alert Icon-->
            <div v-if="hasSlot('icon')" class="alert-icon">
                <slot name="icon"></slot>
            </div>

            <!--Alert Content-->
            <div class="alert-content">
                <!--Title-->
                <span v-if="title" class="alert-title" v-text="title"></span>
                <!--Content-->
                <span>
                    <slot></slot>
                </span>
            </div>

            <!--Close Icon-->
            <icon icon="times" v-if="temporaryCloseable" @click="close" class="alert-close" />

            <!--Countdown Line-->
            <div v-if="temporaryTimer" class="alert-countdown">
                <div
                    class="alert-countdown-line"
                    :class="`radius-${temporaryRadius}`"
                    :style="{ width: countDownCounter + '%' }"
                ></div>
            </div>
        </div>
    </transition>
</template>
<script>
/* Main Functions */
import { defineComponent, inject, ref, toRefs, watch, useSlots} from "vue";

/*Sources*/
import { alertConf } from "@/config";

/*Import FontAwesomeIcon*/
import { library } from "@fortawesome/fontawesome-svg-core";
import { faTimes } from "@fortawesome/free-solid-svg-icons";
library.add(faTimes)

export default defineComponent({
    name: "TAlert",
    props: {
        id: {
            type: [Number, String, Array, Object, Date, Boolean],
            default: function () {
                return "alert-" + Number(new Date());
            }
        },
        closeable: {
            type: Boolean,
            default: false
        },
        timerStatus: {
            type: Boolean,
            default: false,
        },
        timer: {
            type: Number,
            default: null,
        },
        title: {
            type: String,
            default: null
        },
        type: {
            type: String,
            default: null
        },
        radius: {
            type: Number,
            default: null
        },
        design: {
            type: String,
            default: "filled"
        },
        color: {
            type: String,
            default: "light"
        }
    },
    emits: ["destroy"],

    setup(props, { slots, emit }) {

        /*Definitions*/
        const { design, color, radius, closeable, timerStatus, timer, id } = toRefs(props);
        const showAlertBox = ref(true);
        const appConf = inject('appConf');

        /*Temporary Definations*/
        const temporaryDesign = ref(design.value ? design.value : alertConf.design ? alertConf.design : appConf.value.design)
        const temporaryColor = ref(color.value ? color.value : alertConf.color ? alertConf.color : appConf.value.color)
        const temporaryRadius = ref(radius.value ? radius.value : alertConf.radius ? alertConf.radius : appConf.value.radius)
        const temporaryCloseable = ref(closeable.value ? closeable.value : alertConf.closeable ? alertConf.closeable : appConf.value.closeable)
        const temporaryTimer = ref(timer.value ? timer.value : alertConf.timer ? alertConf.timer : appConf.value.timer)

        /*Close Function*/
        const close = () => {
            showAlertBox.value = false;
            emit("destroy", id.value);
        };

        /*Timer*/
        const timerCounter = ref(0);
        const countDownCounter = ref(0);

        watch(timerStatus, (newValue, oldValue) => {
            if (timerStatus.value && !oldValue && newValue > 0) {
                /*Timer Function*/
                setTimeout(() => {
                    showAlertBox.value = false;
                    emit("destroy", id.value);
                }, temporaryTimer.value);

                /*Count Down Function*/
                let countDownFn = setInterval(() => {
                    if (temporaryTimer.value >= timerCounter.value) {
                        countDownCounter.value = 100 - (timerCounter.value / temporaryTimer.value) * 100;
                        timerCounter.value += 4;
                    } else {
                        clearInterval(countDownFn);
                    }
                }, 1);
            }
        })

        /*Slot Check*/
        const hasSlot = name => !!useSlots()[name];

        return {
            appConf,
            alertConf,
            temporaryDesign,
            temporaryColor,
            temporaryRadius,
            temporaryCloseable,
            temporaryTimer,
            showAlertBox,
            countDownCounter,
            timerCounter,
            hasSlot,
            close
        };
    }
});
</script>

<style scoped>
/* eslint-disable no-alert */
.alert-enter-active,
.alert-leave-active {
    transition: all ease-in-out 1000ms;
}

.alert-enter-from,
.alert-leave-to {
    opacity: 0;
}

.alert-enter-to,
.alert-leave-from {
    opacity: 1;
}

/* eslint-disable no-alert */
</style>


================================================
FILE: resources/js/Components/Auth/TForgot.vue
================================================
<template>
    <full-screen-layout
        :bg-image-url="activeDesign.bgImage[appearingMode]"
        :bg-color="activeDesign.bgColor"
    >
        <!--Container-->
        <div :class="[
                'auth-container',
                {'w-full' : deviceType === 'phone'},
            ]">
            <!--Header-->
            <div
                class="auth-header"
                :class="[
                        activeDesign.header,
                        deviceType !== 'phone' && `radius-t-${activeDesign.radius ? activeDesign.radius : appConf.radius}`,
                    ]"
            >
                <!--Logo-->
                <div class="auth-logo">
                    <slot v-if="$slots.logo" name="logo"/>
                    <div v-else :class="authScreenConf.logoAreaClasses">
                        <img
                            :src="temporaryLogo"
                            :class="authScreenConf.logoClasses"
                        />
                        <span
                            v-text="authScreenConf.appName ? authScreenConf.appName : appConf.appName"
                            :class="authScreenConf.appNameClasses"
                        ></span>
                    </div>
                </div>
                <!--Greeting-->
                <div class="auth-greeting" v-if="status || $slots.greeting">
                    <div class="text-sm">
                        <!--Status-->
                        <div v-if="status" class="auth-status">{{ status }}</div>
                        <slot v-else name="greeting"/>
                    </div>
                </div>
            </div>

            <!--Sub Greeting-->
            <div v-if="$slots.subGreeting" class="text-sm shadow p-2 bg-white bg-opacity-75 text-center font-semibold">
                <slot name="subGreeting" />
            </div>

            <!--Form-->
            <div
                class="auth-form"
                :class="[
                    deviceType !== 'phone' && `radius-b-${activeDesign.radius ? activeDesign.radius : appConf.radius}`,
                    activeDesign.body,
                ]"
            >
                <form @submit.prevent="submit">
                    <!--Email-->
                    <div class="mt-2">
                        <t-input-group
                            :label="t('email')"
                            label-for="email"
                            :errors="v.email.$errors"
                        >
                            <t-input-text
                                id="email"
                                v-model="form.email"
                                @blur="v.email.$touch"
                                :radius="3"
                                autofocus
                                autocomplete="username"
                                required
                                type="email"
                            />
                        </t-input-group>
                    </div>

                    <!--Submit Button-->
                    <div class="auth-submit-area flex-col ">
                        <!--Submit Button-->
                        <t-button
                            :class="{ 'opacity-25': form.processing }"
                            :color="activeDesign.forgotPassword.sendButton[appearingMode].color"
                            :design="activeDesign.forgotPassword.sendButton[appearingMode].design"
                            :disabled="form.processing"
                            :radius="3"
                            class="ml-4"
                            size="full"
                        >
                            {{ tm('emailPasswordResetLink') }}
                        </t-button>

                        <!--Back Button-->
                        <t-button
                            :color="activeDesign.forgotPassword.backButton[appearingMode].color"
                            :design="activeDesign.forgotPassword.backButton[appearingMode].design"
                            :link="route('login')"
                            :radius="3"
                            class="mr-4"
                            type="link"
                        >
                            {{ tm('backToLogin') }}
                        </t-button>
                    </div>
                </form>
            </div>
        </div>

        <!--Errors-->
        <div class="auth-error">
            <transition @before-enter="beforeStyle" @after-enter="enterStyle">
                <t-alert v-if="hasErrors" :radius="deviceType !== 'phone' && 5" color="red">
                    <template #icon>
                        <t-bell-icon class="w-8 h-8" />
                    </template>
                    <ul class="list-inside text-sm">
                        <li v-for="(error, key) in errors" :key="key">{{ error }}</li>
                    </ul>
                </t-alert>
            </transition>
        </div>

        <!--Selectors-->
        <div class="fixed bottom-0 flex z-50 w-full justify-center sm:justify-end space-x-6 p-6">
            <!--Language Selector-->
            <t-tooltip
                v-if="authScreenConf.showLanguageSelector"
                position="top"
                :border="false"
                :custom-style="true"
            >
                <!--Selected Language-->
                <div
                    class="flex justify-center items-center group bg-slate-100/50 hover:bg-slate-800/50 dark:text-slate-100 dark:bg-slate-800/75 dark:hover:bg-slate-100/75 dark:hover:text-slate-700 hover:text-slate-100 p-4 w-10 h-10 cursor-pointer overflow-hidden bg-cover"
                    :class="`radius-${authScreenConf.radius ? authScreenConf.radius : appConf.radius}`"
                >
                    <component
                        :is="languages.find(i => i.id === locale).flag"
                        class="flex flex-shrink-0 w-14 aspect-auto drop-shadow transform hover:scale-110 active:scale-90 hover:-rotate-12 transition-all duration-300"
                        :alt="languages.find(i => i.id === locale).name"
                    />
                    <span
                        class="absolute text-sm -top-2 -right-2 bg-slate-100/10 dark:bg-slate-800/50 backdrop-filter backdrop-blur text-slate-100 px-1 rounded"
                        v-text="languages.find(i => i.id === locale).id"
                    ></span>
                </div>
                <template #boxContent>
                    <!--Language Lists-->
                    <div class="top-menu-dropdown-content-wrapper-transparent mb-3">
                        <template v-for="lang in languages" :key="lang.id">
                            <div
                                @click="changeLang(lang.id)"
                                class="top-menu-dropdown-item-transparent"
                            >
                                <component :is="lang.flag" class="w-6 aspect-auto drop-shadow"/>
                                <span v-text="lang.name"></span>
                            </div>
                        </template>
                    </div>
                </template>
            </t-tooltip>
            <!--Dark Mode-->
            <div
                v-if="authScreenConf.showDarkModeSelector"
                class="flex justify-center items-center bg-slate-100/50 hover:bg-slate-800/50 dark:text-slate-100 dark:bg-slate-800/75 dark:hover:bg-slate-100/75 dark:hover:text-slate-700 hover:text-slate-100 p-4 w-10 h-10 cursor-pointer overflow-hidden"
                :class="`radius-${authScreenConf.radius ? authScreenConf.radius : appConf.radius}`"
                @click="changeTheme"
            >
                <transition mode="out-in" name="darkModeTransition">
                    <!-- Light -->
                    <icon
                        v-if="darkMode === 'light'"
                        icon="sun"
                        size="lg"
                        key="light"
                        :alt="tm('lightMode')"
                        class="transform hover:scale-110 active:scale-90 transition-transform duration-300"
                    />
                    <!-- Auto -->
                    <icon
                        v-else-if="darkMode === 'auto'"
                        icon="palette"
                        size="lg"
                        key="auto"
                        :alt="tm('auto')"
                        class="transform hover:scale-110 active:scale-90 transition-transform duration-300"
                    />
                    <!-- Dark -->
                    <icon
                        v-else
                        icon="moon"
                        size="lg"
                        key="dark"
                        :alt="tm('darkMode')"
                        class="transform hover:scale-110 active:scale-90 transition-transform duration-300"
                    />
                </transition>
            </div>
            <!--Change Background-->
            <div
                v-if="authScreenConf.showDesignChanger && authDesigns.length > 1"
                @click="changeBg"
                class="flex justify-center items-center group bg-slate-100/50 hover:bg-slate-800/50 dark:text-slate-100 dark:bg-slate-800/75 dark:hover:bg-slate-100/75 dark:hover:text-slate-700 hover:text-slate-100 p-4 w-10 h-10 cursor-pointer"
                :class="`radius-${authScreenConf.radius ? authScreenConf.radius : appConf.radius}`"
            >
                <icon
                    icon="redo"
                    class="transform group-hover:scale-110 group-active:scale-90 transition-transform duration-300"
                />
            </div>
        </div>
    </full-screen-layout>
</template>

<script>
/*Main functions*/
import { defineComponent, computed, ref } from "vue";
import {useForm} from "@inertiajs/vue3";
import { forgotPasswordStyleMixin } from "@/Mixins/Styles/forgotPasswordStyleMixin";
import windowSizeCalculator from "@/Functions/windowSizeCalculator";
import useVuelidate from "@vuelidate/core";
import {email, helpers, required} from "@vuelidate/validators";
import {useDarkModeStore} from "@/Stores/darkMode.js";

/*Components*/
import FullScreenLayout from "@/Layouts/FullScreenLayout.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import TButton from "@/Components/Button/TButton.vue";
import TAlert from "@/Components/Alert/TAlert.vue";
import TBellIcon from "@/Components/Icon/TBellIcon.vue";
import TTooltip from "@/Components/Tooltip/TTooltip.vue";

/*Sources*/
import {appConf, authScreenConf, badgeConf} from "@/config";
import {authDesigns} from "@/Sources/authScreenDesigns";

/* Multi language */
import {useI18n} from "vue-i18n";
import {useDisplayLanguageStore} from "@/Stores/displayLanguage.js";
import {languages, authTranslates} from "@/Lang/languages";

/*Fontawesome icons*/
import {library} from "@fortawesome/fontawesome-svg-core";
import {faSun, faMoon, faPalette, faRedo, faKey, faBell} from "@fortawesome/free-solid-svg-icons";
import { storeToRefs } from "pinia";

library.add(faSun, faMoon, faPalette, faRedo, faKey, faBell)

export default defineComponent({
    name: "TForgot",
    components: {
        TBellIcon,
        TAlert, TButton, TInputText, TInputGroup, FullScreenLayout, TTooltip
    },
    mixins: [forgotPasswordStyleMixin],
    props: {
        status: String,
        color: {
            type: String,
            default: "gradient-red-to-pink"
        },
        buttonDesign: {
            type: String,
            default: "filled"
        },
        buttonColor: {
            type: String,
            default: "green"
        },
        bgColor: {
            type: String,
            default: "solid-gray"
        },
        bgGradientDirection: {
            type: String
        },
        bgImage: {
            type: String
        }
    },
    setup() {
        /*Device type*/
        const {deviceType} = windowSizeCalculator();

        /* Dark Mode */
        const darkModeStore = useDarkModeStore()
        const {changeTheme} = darkModeStore;
        const {darkMode, appearingMode} = storeToRefs(darkModeStore);

        /* Multi-language */
        const displayLanguageStore = useDisplayLanguageStore()
        const {changeLang} = displayLanguageStore;
        const {locale} = storeToRefs(displayLanguageStore);

        const {t, tm} = useI18n({
            inheritLocale: true,
            messages: authTranslates,
        });

        /* Form */
        const form = useForm({
            email: "",
        });

        /* Client-side Validation */
        const rules = ref({
            email: {
                required: helpers.withMessage(tm('validationMessage.email.required'), required),
                email: helpers.withMessage(tm('validationMessage.email.email'), email)
            }
        });
        const v = useVuelidate(rules, form, {$lazy: true});

        /*Submit*/
        const submit = async () => {
            if (!(await v.value.$validate())) {
                return;
            }
            form.post(route("password.email"), {
                onFinish: () => form.reset("email"),
            });
        };

        /*Logo SRC*/
        /*Temporary Definitions*/
        const temporaryLogo = computed(()=>{
            let logo;


            if(appearingMode.value === 'dark'){
                if(activeDesign.value.logo.dark){
                    logo = activeDesign.value.logo.dark
                }else if(authScreenConf.logo.dark) {
                    logo = authScreenConf.darkLogo
                }else{
                    logo = appConf.logo.dark
                }
            } else {
                if(activeDesign.value.logo.light){
                    logo = activeDesign.value.logo.light
                }else if(authScreenConf.logo.light) {
                    logo = authScreenConf.logo.light
                }else{
                    logo = appConf.logo.light
                }
            }

            return logo;
        });

        /*Design Template Changer*/
        const activeDesignIndex = ref(0)
        const changeBg = () => {
            if (authDesigns.length - 1 > activeDesignIndex.value) {
                activeDesignIndex.value++
            } else {
                activeDesignIndex.value = 0
            }
        };
        const activeDesign = computed(() => {
            return authDesigns[activeDesignIndex.value]
        })


        return {
            authDesigns,
            form,
            darkMode,
            appearingMode,
            changeLang,
            changeTheme,
            changeBg,
            activeDesign,
            submit,
            languages,
            locale,
            deviceType,
            appConf,
            authScreenConf,
            temporaryLogo,
            t,
            tm,
            v
        };
    },

    methods: {

        beforeStyle(event) {
            event.style.opacity = 0;
        },
        enterStyle(event) {
            event.style.opacity = 1;
            event.style.transition = `all 1s linear`;
        }
    },
    computed: {
        errors() {
            return this.$page.props.errors;
        },

        hasErrors() {
            return Object.keys(this.errors).length > 0;
        }
    }
});
</script>


================================================
FILE: resources/js/Components/Auth/TLock.vue
================================================
<template>
    <full-screen-layout :bg-image-url="activeDesign.bgImage[appearingMode]" :bg-color="activeDesign.bgColor">
        <div :class="['relative']">
            <!--Avatar-->
            <div class="auth-avatar-container">
                <div class="auth-avatar">
                    <t-avatar :alt="$page.props.auth.user?.name" :radius="8" :size="7"
                        :src="$page.props.auth.user.profile_photo_url" />
                </div>
            </div>
            <!--Container-->
            <div :class="[
                deviceType !== 'phone' && radiusStyle
            ]">
                <form @submit.prevent="submit">
                    <!--Form-->
                    <div :class="[
                        'auth-lock-form',
                        calculatedLockStyle,
                        deviceType !== 'phone' && radiusStyle
                    ]">
                        <!--Name-->
                        <div class="auth-name">
                            {{ $page.props.auth.user.name }}
                        </div>
                        <!--Password-->
                        <t-input-group :radius="5" class="relative" label-for="password">
                            <t-input-text
                                id="password"
                                v-model="form.password"
                                :radius="3"
                                :placeholder="tm('password')"
                            >
                                <template #icon>
                                    <t-user-circle-icon class="w-5 h-5" />
                                </template>
                            </t-input-text>
                        </t-input-group>

                        <!--Submit Button-->
                        <t-button
                            :class="{ 'opacity-25': form.processing }"
                            :color="activeDesign.lock.reLoginButton[appearingMode].color"
                            :design="activeDesign.lock.reLoginButton[appearingMode].design"
                            :disabled="form.processing"
                            :radius="3"
                            size="full"
                        >{{ t('reLogin') }}
                        </t-button>
                    </div>
                </form>
            </div>

            <!--Errors-->
            <div class="auth-error">
                <transition @before-enter="beforeStyle" @after-enter="enterStyle">
                    <t-alert v-if="hasErrors" :radius="deviceType !== 'phone' && 5" color="red">
                        <template #icon>
                            <t-bell-icon class="w-8 h-8" />
                        </template>
                        <ul class="list-inside text-sm">
                            <li v-for="(error, key) in errors" :key="key">{{ error }}</li>
                        </ul>
                    </t-alert>
                </transition>
            </div>


        </div>

        <!--Selectors-->
        <div class="fixed bottom-0 flex z-50 w-full justify-center sm:justify-end space-x-6 p-6">
            <!--Language Selector-->
            <t-tooltip
                v-if="authScreenConf.showLanguageSelector"
                position="top"
                :border="false"
                :custom-style="true"
            >
                <!--Selected Language-->
                <div
                    class="flex justify-center items-center group bg-slate-100/50 hover:bg-slate-800/50 dark:text-slate-100 dark:bg-slate-800/75 dark:hover:bg-slate-100/75 dark:hover:text-slate-700 hover:text-slate-100 p-4 w-10 h-10 cursor-pointer overflow-hidden bg-cover"
                    :class="`radius-${authScreenConf.radius ? authScreenConf.radius : appConf.radius}`"
                >
                    <component
                        :is="languages.find(i => i.id === locale).flag"
                        class="flex flex-shrink-0 w-14 aspect-auto drop-shadow transform hover:scale-110 active:scale-90 hover:-rotate-12 transition-all duration-300"
                        :alt="languages.find(i => i.id === locale).name"
                    />
                    <span
                        class="absolute text-sm -top-2 -right-2 bg-slate-100/10 dark:bg-slate-800/50 backdrop-filter backdrop-blur text-slate-100 px-1 rounded"
                        v-text="languages.find(i => i.id === locale).id"
                    ></span>
                </div>
                <template #boxContent>
                    <!--Language Lists-->
                    <div class="top-menu-dropdown-content-wrapper-transparent mb-3">
                        <template v-for="lang in languages" :key="lang.id">
                            <div
                                @click="changeLang(lang.id)"
                                class="top-menu-dropdown-item-transparent"
                            >
                                <component :is="lang.flag" class="w-6 aspect-auto drop-shadow"/>
                                <span v-text="lang.name"></span>
                            </div>
                        </template>
                    </div>
                </template>
            </t-tooltip>
            <!--Dark Mode-->
            <div
                v-if="authScreenConf.showDarkModeSelector"
                class="flex justify-center items-center bg-slate-100/50 hover:bg-slate-800/50 dark:text-slate-100 dark:bg-slate-800/75 dark:hover:bg-slate-100/75 dark:hover:text-slate-700 hover:text-slate-100 p-4 w-10 h-10 cursor-pointer overflow-hidden"
                :class="`radius-${authScreenConf.radius ? authScreenConf.radius : appConf.radius}`"
                @click="changeTheme"
            >
                <transition mode="out-in" name="darkModeTransition">
                    <!-- Light -->
                    <icon
                        v-if="darkMode === 'light'"
                        icon="sun"
                        size="lg"
                        key="light"
                        :alt="tm('lightMode')"
                        class="transform hover:scale-110 active:scale-90 transition-transform duration-300"
                    />
                    <!-- Auto -->
                    <icon
                        v-else-if="darkMode === 'auto'"
                        icon="palette"
                        size="lg"
                        key="auto"
                        :alt="tm('auto')"
                        class="transform hover:scale-110 active:scale-90 transition-transform duration-300"
                    />
                    <!-- Dark -->
                    <icon
                        v-else
                        icon="moon"
                        size="lg"
                        key="dark"
                        :alt="tm('darkMode')"
                        class="transform hover:scale-110 active:scale-90 transition-transform duration-300"
                    />
                </transition>
            </div>
            <!--Change Background-->
            <div
                v-if="authScreenConf.showDesignChanger && authDesigns.length > 1"
                @click="changeBg"
                class="flex justify-center items-center group bg-slate-100/50 hover:bg-slate-800/50 dark:text-slate-100 dark:bg-slate-800/75 dark:hover:bg-slate-100/75 dark:hover:text-slate-700 hover:text-slate-100 p-4 w-10 h-10 cursor-pointer"
                :class="`radius-${authScreenConf.radius ? authScreenConf.radius : appConf.radius}`"
            >
                <icon
                    icon="redo"
                    class="transform group-hover:scale-110 group-active:scale-90 transition-transform duration-300"
                />
            </div>
        </div>
    </full-screen-layout>
</template>

<script>
/*Main functions*/
import { defineComponent, computed, ref } from "vue";
import {useForm} from "@inertiajs/vue3";
import { lockStyleMixin } from "@/Mixins/Styles/lockStyleMixin";
import windowSizeCalculator from "@/Functions/windowSizeCalculator";
import useVuelidate from "@vuelidate/core";
import {helpers, required} from "@vuelidate/validators";
import {useDarkModeStore} from "@/Stores/darkMode.js";

/*Components*/
import FullScreenLayout from "@/Layouts/FullScreenLayout.vue";
import TAlert from "@/Components/Alert/TAlert.vue";
import TBellIcon from "@/Components/Icon/TBellIcon.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import TUserCircleIcon from "@/Components/Icon/TUserCircleIcon.vue";
import TAvatar from "@/Components/Avatar/TAvatar.vue";
import TButton from "@/Components/Button/TButton.vue";
import TTooltip from "@/Components/Tooltip/TTooltip.vue";

/*Sources*/
import {appConf, authScreenConf, badgeConf} from "@/config";
import {authDesigns} from "@/Sources/authScreenDesigns";

/* Multi language */
import {useI18n} from "vue-i18n";
import {useDisplayLanguageStore} from "@/Stores/displayLanguage.js";
import {languages, authTranslates} from "@/Lang/languages";

/*Fontawesome icons*/
import {library} from "@fortawesome/fontawesome-svg-core";
import {faSun, faMoon, faPalette, faRedo, faKey, faBell} from "@fortawesome/free-solid-svg-icons";
import { storeToRefs } from "pinia";

library.add(faSun, faMoon, faPalette, faRedo, faKey, faBell)

export default defineComponent({
    name: "TLock",
    components: { TButton, TAvatar, TUserCircleIcon, TInputText, TInputGroup, TBellIcon, TAlert, FullScreenLayout, TTooltip },
    mixins: [lockStyleMixin],
    props: {
        buttonColor: {
            type: String,
            default: "solid-green"
        },
        buttonDesign: {
            type: String,
            default: "filled"
        },
        bgColor: {
            type: String,
            default: "gray"
        },
        bgGradientDirection: {
            type: String
        },
        bgImage: {
            type: String
        },
        buttonText: {
            type: String,
            default: "Re-Login"
        }
    },
    setup() {
        /*Device type*/
        const { deviceType } = windowSizeCalculator();

        /* Dark Mode */
        const darkModeStore = useDarkModeStore()
        const {changeTheme} = darkModeStore;
        const {darkMode, appearingMode} = storeToRefs(darkModeStore);

        /* Multi-language */
        const displayLanguageStore = useDisplayLanguageStore()
        const {changeLang} = displayLanguageStore;
        const {locale} = storeToRefs(displayLanguageStore);

        const {t, tm} = useI18n({
            inheritLocale: true,
            messages: authTranslates,
        });

        /* Form */
        const form = useForm({
            password: "",
        });

        /* Client-side Validation */
        const rules = ref({
            password: {
                required: helpers.withMessage(tm('validationMessage.password.required'), required)
            },
        });
        const v = useVuelidate(rules, form, {$lazy: true});

        /*Submit*/
        const submit = async () => {
            if (!(await v.value.$validate())) {
                return;
            }
            form.post(route("unlock"), {
                onFinish: () => form.reset("password"),
            });
        };

        /*Design Template Changer*/
        const activeDesignIndex = ref(0)
        const changeBg = () => {
            if (authDesigns.length - 1 > activeDesignIndex.value) {
                activeDesignIndex.value++
            } else {
                activeDesignIndex.value = 0
            }
        };
        const activeDesign = computed(() => {
            return authDesigns[activeDesignIndex.value]
        })

        return {
            authDesigns,
            form,
            darkMode,
            appearingMode,
            changeLang,
            changeTheme,
            changeBg,
            activeDesign,
            submit,
            languages,
            locale,
            deviceType,
            appConf,
            authScreenConf,
            t,
            tm,
            v
        };
    },
    methods: {
        beforeStyle(event) {
            event.style.opacity = 0;
        },
        enterStyle(event) {
            event.style.opacity = 1;
            event.style.transition = `all 1s linear`;
        }
    },
    computed: {
        errors() {
            return this.$page.props.errors;
        },

        hasErrors() {
            return Object.keys(this.errors).length > 0;
        }
    }
});
</script>


================================================
FILE: resources/js/Components/Auth/TLogin.vue
================================================
<template>
    <full-screen-layout
        :bg-image-url="activeDesign.bgImage[appearingMode]"
        :bg-color="activeDesign.bgColor"
    >

        <!--Container-->
        <div :class="[
                'auth-container',
                {'w-full' : deviceType === 'phone'},
            ]">
            <!--Header-->
            <div
                class="auth-header"
                :class="[
                        activeDesign.header,
                        deviceType !== 'phone' && `radius-t-${activeDesign.radius ? activeDesign.radius : appConf.radius}`,
                    ]"
            >
                <!--Logo-->
                <div class="auth-logo">
                    <slot v-if="$slots.logo" name="logo"/>
                    <div v-else :class="authScreenConf.logoAreaClasses">
                        <img
                            :src="temporaryLogo"
                            :class="authScreenConf.logoClasses"
                        />
                        <span
                            v-text="authScreenConf.appName ? authScreenConf.appName : appConf.appName"
                            :class="authScreenConf.appNameClasses"
                        ></span>
                    </div>
                </div>
                <!--Greeting-->
                <div class="auth-greeting" v-if="status || $slots.greeting">
                    <div class="text-sm">
                        <!--Status-->
                        <div v-if="status" class="auth-status">{{ status }}</div>
                        <slot v-else name="greeting"/>
                    </div>
                </div>
            </div>

            <!--Form-->
            <div
                class="auth-form"
                :class="[
                        deviceType !== 'phone' && `radius-b-${activeDesign.radius ? activeDesign.radius : appConf.radius}`,
                        activeDesign.body,
                    ]"
            >
                <form @submit.prevent="submit">
                    <!--Email-->
                    <div>
                        <t-input-group
                            :label="t('email')"
                            label-for="email"
                            :errors="v.email.$errors"
                        >
                            <t-input-text
                                id="email"
                                v-model="form.email"
                                @blur="v.email.$touch"
                                :radius="3"
                                autofocus
                                autocomplete="username"
                                required
                                type="email"
                            />
                        </t-input-group>
                    </div>
                    <!--Password-->
                    <div class="mt-4">
                        <t-input-group
                            :label="t('password')"
                            label-for="password"
                            :errors="v.password.$errors"
                        >
                            <t-input-text
                                id="password"
                                v-model="form.password"
                                @blur="v.password.$touch"
                                :radius="3"
                                autocomplete="current-password"
                                required
                                type="password"
                            />
                        </t-input-group>
                    </div>

                    <div class="auth-remember">
                        <!--Remember Me-->
                        <label class="flex items-center">
                            <t-input-check-box
                                id="remember"
                                v-model="form.remember"
                                :label="t('rememberMe')"
                            >
                                <template #icon>
                                    <icon icon="key" size="sm"/>
                                </template>
                            </t-input-check-box>
                        </label>

                        <!--Forgot Password-->
                        <Link
                            v-if="canResetPassword"
                            :href="route('password.request')"
                            class="auth-forgot-password"
                        >{{ t('forgotPassword') }}
                        </Link>
                    </div>
                    <!--Submit Area-->
                    <div class="auth-submit-area">
                        <!--Register Button-->
                        <t-button
                            :class="{ 'opacity-25': form.processing }"
                            :design="activeDesign.login.registerButton[appearingMode].design"
                            :color="activeDesign.login.registerButton[appearingMode].color"
                            :link="route('register')"
                            :radius="3"
                            type="link"
                        >{{ t('register') }}
                        </t-button>

                        <!--Submit Button-->
                        <t-button
                            :class="{ 'opacity-25': form.processing }"
                            :color="activeDesign.login.loginButton[appearingMode].color"
                            :design="activeDesign.login.loginButton[appearingMode].design"
                            :disabled="form.processing"
                            :radius="3"
                            class="ml-4"
                        >{{ t('login') }}
                        </t-button>
                    </div>
                </form>
            </div>
        </div>

        <!--Errors-->
        <div class="auth-error">
            <transition @before-enter="beforeStyle" @after-enter="enterStyle">
                <t-alert v-if="hasErrors" :radius="deviceType !== 'phone' && 5" color="danger">
                    <template #icon>
                        <icon icon="bell" size="lg"/>
                    </template>
                    <ul class="list-inside text-sm">
                        <li v-for="(error, key) in errors" :key="key">{{ error }}</li>
                    </ul>
                </t-alert>
            </transition>
        </div>


        <!--Selectors-->
        <div class="fixed bottom-0 flex z-50 w-full justify-center sm:justify-end space-x-6 p-6">
            <!--Language Selector-->
            <t-tooltip
                v-if="authScreenConf.showLanguageSelector"
                position="top"
                :border="false"
                :custom-style="true"
            >
                <!--Selected Language-->
                <div
                    class="flex justify-center items-center group bg-slate-100/50 hover:bg-slate-800/50 dark:text-slate-100 dark:bg-slate-800/75 dark:hover:bg-slate-100/75 dark:hover:text-slate-700 hover:text-slate-100 p-4 w-10 h-10 cursor-pointer overflow-hidden bg-cover"
                    :class="`radius-${authScreenConf.radius ? authScreenConf.radius : appConf.radius}`"
                >
                    <component
                        :is="languages.find(i => i.id === locale).flag"
                        class="flex flex-shrink-0 w-14 aspect-auto drop-shadow transform hover:scale-110 active:scale-90 hover:-rotate-12 transition-all duration-300"
                        :alt="languages.find(i => i.id === locale).name"
                    />
                    <span
                        class="absolute text-sm -top-2 -right-2 bg-slate-100/10 dark:bg-slate-800/50 backdrop-filter backdrop-blur text-slate-100 px-1 rounded"
                        v-text="languages.find(i => i.id === locale).id"
                    ></span>
                </div>
                <template #boxContent>
                    <!--Language Lists-->
                    <div class="top-menu-dropdown-content-wrapper-transparent mb-3">
                        <template v-for="lang in languages" :key="lang.id">
                            <div
                                @click="changeLang(lang.id)"
                                class="top-menu-dropdown-item-transparent"
                            >
                                <component :is="lang.flag" class="w-6 aspect-auto drop-shadow"/>
                                <span v-text="lang.name"></span>
                            </div>
                        </template>
                    </div>
                </template>
            </t-tooltip>
            <!--Dark Mode-->
            <div
                v-if="authScreenConf.showDarkModeSelector"
                class="flex justify-center items-center bg-slate-100/50 hover:bg-slate-800/50 dark:text-slate-100 dark:bg-slate-800/75 dark:hover:bg-slate-100/75 dark:hover:text-slate-700 hover:text-slate-100 p-4 w-10 h-10 cursor-pointer overflow-hidden"
                :class="`radius-${authScreenConf.radius ? authScreenConf.radius : appConf.radius}`"
                @click="changeTheme"
            >
                <transition mode="out-in" name="darkModeTransition">
                    <!-- Light -->
                    <icon
                        v-if="darkMode === 'light'"
                        icon="sun"
                        size="lg"
                        key="light"
                        :alt="tm('lightMode')"
                        class="transform hover:scale-110 active:scale-90 transition-transform duration-300"
                    />
                    <!-- Auto -->
                    <icon
                        v-else-if="darkMode === 'auto'"
                        icon="palette"
                        size="lg"
                        key="auto"
                        :alt="tm('auto')"
                        class="transform hover:scale-110 active:scale-90 transition-transform duration-300"
                    />
                    <!-- Dark -->
                    <icon
                        v-else
                        icon="moon"
                        size="lg"
                        key="dark"
                        :alt="tm('darkMode')"
                        class="transform hover:scale-110 active:scale-90 transition-transform duration-300"
                    />
                </transition>
            </div>
            <!--Change Background-->
            <div
                v-if="authScreenConf.showDesignChanger && authDesigns.length > 1"
                @click="changeBg"
                class="flex justify-center items-center group bg-slate-100/50 hover:bg-slate-800/50 dark:text-slate-100 dark:bg-slate-800/75 dark:hover:bg-slate-100/75 dark:hover:text-slate-700 hover:text-slate-100 p-4 w-10 h-10 cursor-pointer"
                :class="`radius-${authScreenConf.radius ? authScreenConf.radius : appConf.radius}`"
            >
                <icon
                    icon="redo"
                    class="transform group-hover:scale-110 group-active:scale-90 transition-transform duration-300"
                />
            </div>
        </div>
    </full-screen-layout>
</template>

<script>
/*Main functions*/
import {defineComponent, computed, ref} from "vue";
import {loginStyleMixin} from "@/Mixins/Styles/loginStyleMixin";
import {Link, useForm} from "@inertiajs/vue3";
import windowSizeCalculator from "@/Functions/windowSizeCalculator";
import useVuelidate from "@vuelidate/core";
import {email, helpers, required} from "@vuelidate/validators";
import {useDarkModeStore} from "@/Stores/darkMode.js";

/*Components*/
import TAlert from "@/Components/Alert/TAlert.vue";
import TBellIcon from "@/Components/Icon/TBellIcon.vue";
import TButton from "@/Components/Button/TButton.vue";
import FullScreenLayout from "@/Layouts/FullScreenLayout.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import TDropdown from "@/Components/Dropdown/TDropdown.vue";
import TTooltip from "@/Components/Tooltip/TTooltip.vue";
import TInputCheckBox from "@/Components/Form/Inputs/TInputCheckBox.vue";

/*Sources*/
import {appConf, authScreenConf, badgeConf} from "@/config";
import {authDesigns} from "@/Sources/authScreenDesigns";

/* Multi language */
import {useI18n} from "vue-i18n";
import {useDisplayLanguageStore} from "@/Stores/displayLanguage.js";
import {languages, authTranslates} from "@/Lang/languages";

/*Fontawesome icons*/
import {library} from "@fortawesome/fontawesome-svg-core";
import {faSun, faMoon, faPalette, faRedo, faKey, faBell} from "@fortawesome/free-solid-svg-icons";
import { storeToRefs } from "pinia";

library.add(faSun, faMoon, faPalette, faRedo, faKey, faBell)

export default defineComponent({
    name: "TLogin",
    components: {
        TInputCheckBox,
        TTooltip,
        TAlert,
        TBellIcon,
        TButton,
        TDropdown,
        FullScreenLayout,
        TInputGroup,
        TInputText,
        Link
    },
    mixins: [loginStyleMixin],
    props: {
        canResetPassword: Boolean,
        status: String,
    },
    setup(props) {
        /*Device type*/
        const {deviceType} = windowSizeCalculator();

        /* Dark Mode */
        const darkModeStore = useDarkModeStore()
        const {changeTheme} = darkModeStore;
        const {darkMode, appearingMode} = storeToRefs(darkModeStore);

        /* Multi-language */
        const displayLanguageStore = useDisplayLanguageStore()
        const {changeLang} = displayLanguageStore;
        const {locale} = storeToRefs(displayLanguageStore);

        const {t, tm} = useI18n({
            inheritLocale: true,
            messages: authTranslates,
        });

        /* Login */
        const form = useForm({
            email: "",
            password: "",
            remember: false,
        });


        /* Client-side Validation */
        const rules = ref({
            email: {
                required: helpers.withMessage(tm('validationMessage.email.required'), required),
                email: helpers.withMessage(tm('validationMessage.email.email'), email)
            },
            password: {
                required: helpers.withMessage(tm('validationMessage.password.required'), required)
            },
        });
        const v = useVuelidate(rules, form, {$lazy: true});

        /*Submit*/
        const submit = async () => {
            if (!(await v.value.$validate())) {
                return;
            }
            form
                .transform((data) => ({
                    ...data,
                    remember: form.remember ? "on" : "",
                }))
                .post(route("login"), {
                    onFinish: () => form.reset("password"),
                });
        };

        /*Logo SRC*/
        /*Temporary Definitions*/
        const temporaryLogo = computed(()=>{
            let logo;


            if(appearingMode.value === 'dark'){
                if(activeDesign.value.logo.dark){
                    logo = activeDesign.value.logo.dark
                }else if(authScreenConf.logo.dark) {
                    logo = authScreenConf.darkLogo
                }else{
                    logo = appConf.logo.dark
                }
            } else {
                if(activeDesign.value.logo.light){
                    logo = activeDesign.value.logo.light
                }else if(authScreenConf.logo.light) {
                    logo = authScreenConf.logo.light
                }else{
                    logo = appConf.logo.light
                }
            }

            return logo;
        });

        /*Design Template Changer*/
        const activeDesignIndex = ref(0)
        const changeBg = () => {
            if (authDesigns.length - 1 > activeDesignIndex.value) {
                activeDesignIndex.value++
            } else {
                activeDesignIndex.value = 0
            }
        };
        const activeDesign = computed(() => {
            return authDesigns[activeDesignIndex.value]
        })

        return {
            authDesigns,
            form,
            darkMode,
            appearingMode,
            changeLang,
            changeTheme,
            changeBg,
            activeDesign,
            submit,
            languages,
            locale,
            deviceType,
            appConf,
            authScreenConf,
            temporaryLogo,
            t,
            tm,
            v
        };
    },

    methods: {
        beforeStyle(event) {
            event.style.opacity = 0;
        },
        enterStyle(event) {
            event.style.opacity = 1;
            event.style.transition = `all 1s linear`;
        }
    },
    computed: {
        errors() {
            return this.$page.props.errors;
        },

        hasErrors() {
            return Object.keys(this.errors).length > 0;
        }
    }
});
</script>


================================================
FILE: resources/js/Components/Auth/TRegister.vue
================================================
<template>
    <full-screen-layout
        :bg-image-url="activeDesign.bgImage[appearingMode]"
        :bg-color="activeDesign.bgColor"
    >
        <!--Container-->
        <div :class="[
                'auth-container',
                {'w-full' : deviceType === 'phone'},
            ]">
            <!--Header-->
            <div
                class="auth-header"
                :class="[
                        activeDesign.header,
                        deviceType !== 'phone' && `radius-t-${activeDesign.radius ? activeDesign.radius : appConf.radius}`,
                    ]"
            >
                <!--Logo-->
                <div class="auth-logo">
                    <slot v-if="$slots.logo" name="logo"/>
                    <div v-else :class="authScreenConf.logoAreaClasses">
                        <img
                            :src="temporaryLogo"
                            :class="authScreenConf.logoClasses"
                        />
                        <span
                            v-text="authScreenConf.appName ? authScreenConf.appName : appConf.appName"
                            :class="authScreenConf.appNameClasses"
                        ></span>
                    </div>
                </div>
                <!--Greeting-->
                <div class="auth-greeting" v-if="status || $slots.greeting">
                    <div class="text-sm">
                        <!--Status-->
                        <div v-if="status" class="auth-status">{{ status }}</div>
                        <slot v-else name="greeting"/>
                    </div>
                </div>
            </div>

            <!--Form-->
            <div
                class="auth-form"
                :class="[
                        deviceType !== 'phone' && `radius-b-${activeDesign.radius ? activeDesign.radius : appConf.radius}`,
                        activeDesign.body,
                    ]"
            >
            <form @submit.prevent="submit">
                <!--Name-->
                <div>
                    <t-input-group
                        :label="t('name')"
                        label-for="name"
                        :errors="v.name.$errors"
                    >
                        <t-input-text
                            id="name"
                            v-model="form.name"
                            @blur="v.name.$touch"
                            :radius="3"
                            autocomplete="name"
                            autofocus
                            required
                            type="text"
                        />
                    </t-input-group>
                </div>
                <!--Email-->
                <div class="mt-4">
                    <t-input-group
                        :label="t('email')"
                        label-for="email"
                        :errors="v.email.$errors"
                    >
                        <t-input-text
                            id="email"
                            v-model="form.email"
                            @blur="v.email.$touch"
                            autocomplete="username"
                            :radius="3"
                            required
                            type="email"
                        />
                    </t-input-group>
                </div>
                <!--Password-->
                <div class="mt-4">
                    <t-input-group
                        :label="t('password')"
                        label-for="password"
                        :errors="v.password.$errors"
                    >
                        <t-input-text
                            id="password"
                            v-model="form.password"
                            @blur="v.password.$touch"
                            :radius="3"
                            autocomplete="new-password"
                            required
                            type="password"
                        />
                    </t-input-group>
                </div>
                <!--Confirm Password-->
                <div class="mt-4">
                    <t-input-group
                        :label="t('passwordConfirmation')"
                        label-for="password_confirmation"
                        :errors="v.password_confirmation.$errors"
                    >
                        <t-input-text
                            id="password_confirmation"
                            v-model="form.password_confirmation"
                            @blur="v.password_confirmation.$touch"
                            :radius="3"
                            autocomplete="new-password"
                            required
                            type="password"
                        />
                    </t-input-group>
                </div>
                <!--Terms and Privacy Policy-->
                <!--TODO: Open Modal-->
                <!--Terms-->
                <div v-if="privacyPolicyFeature" class="mt-4">
                <t-input-group label-for="terms">
                    <div class="flex items-center">
                        <input
                            id="terms"
                            v-model="form.terms"
                            name="terms"
                            type="checkbox"
                        />

                        <!--Turkish Terms-->
                        <div v-if="locale === 'tr'" class="ml-2">
                            <i18n-t keypath="terms" tag="termsOfService">
                                <Link
                                    :href="termsLink"
                                    class="underline text-sm text-gray-600 hover:text-gray-900"
                                    target="_blank"
                                >
                                    {{ t('termsOfService') }}
                                </Link>
                            </i18n-t>
                            <i18n-t keypath="terms" tag="and">
                                {{ t('and') }}
                            </i18n-t>
                            <i18n-t keypath="terms" tag="privacyPolicy">
                                <Link
                                    :href="policyLink"
                                    class="underline text-sm text-gray-600 hover:text-gray-900"
                                    target="_blank"
                                >
                                    {{ t('privacyPolicy') }}
                                </Link>
                            </i18n-t>
                            <i18n-t keypath="terms" tag="iAgreeToThe">
                                {{ t('iAgreeToThe') }}
                            </i18n-t>
                        </div>

                        <!--Other Languages Terms-->
                        <div v-else>
                            <i18n-t keypath="terms" tag="iAgreeToThe">
                                {{ t('iAgreeToThe') }}
                            </i18n-t>
                            <i18n-t keypath="terms" tag="termsOfService">
                                <Link
                                    :href="termsLink"
                                    class="underline text-sm text-gray-600 hover:text-gray-900"
                                    target="_blank"
                                >
                                    {{ t('termsOfService') }}
                                </Link>
                            </i18n-t>
                            <i18n-t keypath="terms" tag="and">
                                {{ t('and') }}
                            </i18n-t>
                            <i18n-t keypath="terms" tag="privacyPolicy">
                                <Link
                                    :href="policyLink"
                                    class="underline text-sm text-gray-600 hover:text-gray-900"
                                    target="_blank"
                                >
                                    {{ t('privacyPolicy') }}
                                </Link>
                            </i18n-t>
                        </div>
                    </div>
                </t-input-group>
                </div>

                <div class="flex items-center justify-end mt-4">
                    <!--Login Link-->
                    <t-button
                        :class="{ 'opacity-25': form.processing }"
                        :design="activeDesign.register.loginButton[appearingMode].design"
                        :color="activeDesign.register.loginButton[appearingMode].color"
                        :link="route('login')"
                        :radius="3"
                        type="link"
                    >{{ t('alreadyRegistered') }}
                    </t-button>

                    <!--Register Button-->
                    <t-button
                        :class="{ 'opacity-25': form.processing }"
                        :disabled="form.processing"
                        :radius="3"
                        class="ml-4"
                        :color="activeDesign.register.registerButton[appearingMode].color"
                        :design="activeDesign.register.registerButton[appearingMode].design"
                    >
                        {{ t('register') }}
                    </t-button>
                </div>
            </form>
            </div>
        </div>
        <div class="auth-error">
            <!--Errors-->
            <transition @before-enter="beforeStyle" @after-enter="enterStyle">
            <t-alert v-if="hasErrors" :radius="deviceType !== 'phone' && 5" color="red">
                <template #icon>
                <t-bell-icon class="w-8 h-8" />
                </template>
                <ul class="list-inside text-sm">
                <li v-for="(error, key) in errors" :key="key">{{ error }}</li>
                </ul>
            </t-alert>
            </transition>
        </div>

        <!--Selectors-->
        <div class="fixed bottom-0 flex z-50 w-full justify-center sm:justify-end space-x-6 p-6">
            <!--Language Selector-->
            <t-tooltip
                v-if="authScreenConf.showLanguageSelector"
                position="top"
                :border="false"
                :custom-style="true"
            >
                <!--Selected Language-->
                <div
                    class="flex justify-center items-center group bg-slate-100/50 hover:bg-slate-800/50 dark:text-slate-100 dark:bg-slate-800/75 dark:hover:bg-slate-100/75 dark:hover:text-slate-700 hover:text-slate-100 p-4 w-10 h-10 cursor-pointer overflow-hidden bg-cover"
                    :class="`radius-${authScreenConf.radius ? authScreenConf.radius : appConf.radius}`"
                >
                    <component
                        :is="languages.find(i => i.id === locale).flag"
                        class="flex flex-shrink-0 w-14 aspect-auto drop-shadow transform hover:scale-110 active:scale-90 hover:-rotate-12 transition-all duration-300"
                        :alt="languages.find(i => i.id === locale).name"
                    />
                    <span
                        class="absolute text-sm -top-2 -right-2 bg-slate-100/10 dark:bg-slate-800/50 backdrop-filter backdrop-blur text-slate-100 px-1 rounded"
                        v-text="languages.find(i => i.id === locale).id"
                    ></span>
                </div>
                <template #boxContent>
                    <!--Language Lists-->
                    <div class="top-menu-dropdown-content-wrapper-transparent mb-3">
                        <template v-for="lang in languages" :key="lang.id">
                            <div
                                @click="changeLang(lang.id)"
                                class="top-menu-dropdown-item-transparent"
                            >
                                <component :is="lang.flag" class="w-6 aspect-auto drop-shadow"/>
                                <span v-text="lang.name"></span>
                            </div>
                        </template>
                    </div>
                </template>
            </t-tooltip>
            <!--Dark Mode-->
            <div
                v-if="authScreenConf.showDarkModeSelector"
                class="flex justify-center items-center bg-slate-100/50 hover:bg-slate-800/50 dark:text-slate-100 dark:bg-slate-800/75 dark:hover:bg-slate-100/75 dark:hover:text-slate-700 hover:text-slate-100 p-4 w-10 h-10 cursor-pointer overflow-hidden"
                :class="`radius-${authScreenConf.radius ? authScreenConf.radius : appConf.radius}`"
                @click="changeTheme"
            >
                <transition mode="out-in" name="darkModeTransition">
                    <!-- Light -->
                    <icon
                        v-if="darkMode === 'light'"
                        icon="sun"
                        size="lg"
                        key="light"
                        :alt="tm('lightMode')"
                        class="transform hover:scale-110 active:scale-90 transition-transform duration-300"
                    />
                    <!-- Auto -->
                    <icon
                        v-else-if="darkMode === 'auto'"
                        icon="palette"
                        size="lg"
                        key="auto"
                        :alt="tm('auto')"
                        class="transform hover:scale-110 active:scale-90 transition-transform duration-300"
                    />
                    <!-- Dark -->
                    <icon
                        v-else
                        icon="moon"
                        size="lg"
                        key="dark"
                        :alt="tm('darkMode')"
                        class="transform hover:scale-110 active:scale-90 transition-transform duration-300"
                    />
                </transition>
            </div>
            <!--Change Background-->
            <div
                v-if="authScreenConf.showDesignChanger && authDesigns.length > 1"
                @click="changeBg"
                class="flex justify-center items-center group bg-slate-100/50 hover:bg-slate-800/50 dark:text-slate-100 dark:bg-slate-800/75 dark:hover:bg-slate-100/75 dark:hover:text-slate-700 hover:text-slate-100 p-4 w-10 h-10 cursor-pointer"
                :class="`radius-${authScreenConf.radius ? authScreenConf.radius : appConf.radius}`"
            >
                <icon
                    icon="redo"
                    class="transform group-hover:scale-110 group-active:scale-90 transition-transform duration-300"
                />
            </div>
        </div>
  </full-screen-layout>
</template>

<script>
/*Main functions*/
import {defineComponent, computed, ref} from "vue";
import { registerStyleMixin } from "@/Mixins/Styles/registerStyleMixin";
import {Link, useForm} from "@inertiajs/vue3";
import windowSizeCalculator from "@/Functions/windowSizeCalculator";
import useVuelidate from "@vuelidate/core";
import {email, helpers, required} from "@vuelidate/validators";
import {useDarkModeStore} from "@/Stores/darkMode.js";

/*Components*/
import TAlert from "@/Components/Alert/TAlert.vue";
import TBellIcon from "@/Components/Icon/TBellIcon.vue";
import TButton from "@/Components/Button/TButton.vue";
import FullScreenLayout from "@/Layouts/FullScreenLayout.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import TDropdown from "@/Components/Dropdown/TDropdown.vue";
import TTooltip from "@/Components/Tooltip/TTooltip.vue";
import TInputCheckBox from "@/Components/Form/Inputs/TInputCheckBox.vue";

/*Sources*/
import {appConf, authScreenConf, badgeConf} from "@/config";
import {authDesigns} from "@/Sources/authScreenDesigns";

/* Multi language */
import {useI18n} from "vue-i18n";
import {useDisplayLanguageStore} from "@/Stores/displayLanguage.js";
import {languages, authTranslates} from "@/Lang/languages";

/*Fontawesome icons*/
import {library} from "@fortawesome/fontawesome-svg-core";
import {faSun, faMoon, faPalette, faRedo, faKey, faBell} from "@fortawesome/free-solid-svg-icons";
import { storeToRefs } from "pinia";

library.add(faSun, faMoon, faPalette, faRedo, faKey, faBell)

export default defineComponent({
  name: "TRegister",
  components: {
    TAlert,
    TBellIcon,
    TButton,
    FullScreenLayout,
    TInputGroup,
    TInputText,
    Link,
    TDropdown,
    TTooltip,
    TInputCheckBox
  },
  mixins: [registerStyleMixin],
  props: {
    privacyPolicyFeature: Boolean,
    termsLink: String,
    policyLink: String
  },
  setup() {
    /*Device type*/
    const { deviceType } = windowSizeCalculator();

    /* Dark Mode */
    const darkModeStore = useDarkModeStore()
    const {changeTheme} = darkModeStore;
    const {darkMode, appearingMode} = storeToRefs(darkModeStore);

    /* Multi-language */
    const displayLanguageStore = useDisplayLanguageStore()
    const {changeLang} = displayLanguageStore;
    const {locale} = storeToRefs(displayLanguageStore);

    const {t, tm} = useI18n({
        inheritLocale: true,
        messages: authTranslates,
    });

    /* Register */
    const form = useForm({
        name: "",
        email: "",
        password: "",
        password_confirmation: "",
        terms: false
    });

    /* Client-side Validation */
    const rules = ref({
        name: {
            required: helpers.withMessage(tm('validationMessage.name.required'), required)
        },
        email: {
            required: helpers.withMessage(tm('validationMessage.email.required'), required),
            email: helpers.withMessage(tm('validationMessage.email.email'), email)
        },
        password: {
            required: helpers.withMessage(tm('validationMessage.password.required'), required)
        },
        password_confirmation: {
            required: helpers.withMessage(tm('validationMessage.passwordConfirmation.required'), required)
        },
    });
    const v = useVuelidate(rules, form, {$lazy: true});

    /*Submit*/
    const submit = async () => {
        if (!(await v.value.$validate())) {
            return;
        }
        form
            .transform((data) => ({
                ...data,
                remember: form.remember ? "on" : "",
            }))
            .post(route("register"), {
                onFinish: () => form.reset("password", "password_confirmation"),
            });
    };

     /*Logo SRC*/
    /*Temporary Definitions*/
    const temporaryLogo = computed(()=>{
        let logo;


        if(appearingMode.value === 'dark'){
            if(activeDesign.value.logo.dark){
                logo = activeDesign.value.logo.dark
            }else if(authScreenConf.logo.dark) {
                logo = authScreenConf.darkLogo
            }else{
                logo = appConf.logo.dark
            }
        } else {
            if(activeDesign.value.logo.light){
                logo = activeDesign.value.logo.light
            }else if(authScreenConf.logo.light) {
                logo = authScreenConf.logo.light
            }else{
                logo = appConf.logo.light
            }
        }

        return logo;
    });

    /*Design Template Changer*/
    const activeDesignIndex = ref(0)
    const changeBg = () => {
        if (authDesigns.length - 1 > activeDesignIndex.value) {
            activeDesignIndex.value++
        } else {
            activeDesignIndex.value = 0
        }
    };
    const activeDesign = computed(() => {
        return authDesigns[activeDesignIndex.value]
    })


        return {
            authDesigns,
            form,
            darkMode,
            appearingMode,
            changeLang,
            changeTheme,
            changeBg,
            activeDesign,
            submit,
            languages,
            locale,
            deviceType,
            appConf,
            authScreenConf,
            temporaryLogo,
            t,
            tm,
            v
        };
  },

    methods: {
        beforeStyle(event) {
            event.style.opacity = 0;
        },
        enterStyle(event) {
            event.style.opacity = 1;
            event.style.transition = `all 1s linear`;
        }
    },

    computed: {
        errors() {
            return this.$page.props.errors;
        },

        hasErrors() {
            return Object.keys(this.errors).length > 0;
        }
    }
});
</script>


================================================
FILE: resources/js/Components/Avatar/TAvatar.vue
================================================
<template>
    <div :class="[
        'avatar-container',
        {'avatar-container-group' : isAvatarGroup},
        `avatar-size-${temporarySize}`,
        ]">

        <!--Link-->
        <Link v-if="link" :href="link">
            <img :class="[
            `radius-${temporaryRadius}`,
            `avatar-size-${temporarySize}`,
             {'avatar-group-image' : isAvatarGroup}
            ]"
                 alt="avatar"
                 :src="temporarySrc"
            />
        </Link>

        <!--Without Link-->
        <img v-else
             alt="avatar"
             :class="[
            `radius-${temporaryRadius}`,
            `avatar-size-${temporarySize}`,
            {'avatar-group-image' : isAvatarGroup}
            ]"
             :src="temporarySrc"
        />

        <!--Indicator-->
        <div
            v-if="indicator"
            class="avatar-indicator"
            :class="[
                temporarySize < 7 ? 'text-2xs' : 'text-normal',
                `avatar-indicator-position-${indicator.position}`,
                `avatar-indicator-${indicator.color}`
            ]">
            <div v-text="temporarySize>3 ? indicator.label : null"/>
        </div>
    </div>
</template>

<script>
/*Main functions*/
import {defineComponent, getCurrentInstance, inject, ref, toRefs} from "vue";
import {Link} from "@inertiajs/vue3";

/*Sources*/
import {avatarConf} from "@/config";

export default defineComponent({
    name: "TAvatar",
    props: {
        src: {
            type: String,
            default: null,
        },
        link: {
            type: String,
            default: null,
        },
        size: {
            type: Number,
            default: null
        },
        radius: {
            type: Number,
            default: null
        },
        indicator: {
            type: Object,
            default: null,
        }
    },
    components: {
        Link
    },
    setup(props) {
        /*Definitions*/
        const {size, src, radius} = toRefs(props);
        const appConf = inject('appConf');

        /*Temporary Definitions*/
        const temporarySize = ref(size.value ? size.value : avatarConf.size ? avatarConf.size : appConf.size);
        const temporaryRadius = ref(radius.value ? radius.value : avatarConf.radius ? avatarConf.radius : appConf.radius);
        const temporarySrc = ref(src.value ? src.value : avatarConf.defaultPhotoSrc);

        /*Is Avatar Group*/
        const isAvatarGroup = getCurrentInstance().parent.type.name === "TAvatarGroup";

        return {isAvatarGroup, temporarySize, temporaryRadius, temporarySrc};
    }
});
</script>


================================================
FILE: resources/js/Components/Avatar/TAvatarGroup.vue
================================================
<template>
  <div class="avatar-group-container">
    <slot />
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "TAvatarGroup"
});
</script>


================================================
FILE: resources/js/Components/Badge/TBadge.vue
================================================
<template>
    <div
        class="badge"
        :class="containerStyle"
        @click.stop="collapsible && toggle(); (selectable && !selectIndicator) && select()"
    >
        <!--Inline Line-->
        <div v-if="temporaryDesign.includes('line')"
             id="line"
             :class="temporaryDesign === 'inline' ? 'badge-inline-line' : 'badge-outline-line'"
        />

        <!--Badge Icon-->
        <div
            v-if="hasSlot('icon') && temporaryDesign !== 'outline'"
            class="badge-icon"
            :class="[
                {'ml-0.5' : 5 > temporaryRadius && temporaryDesign !== 'block' && !collapsible},
                {'ml-0.5' : 5 <= temporaryRadius && temporaryDesign === 'inline'}
            ]"
        >
            <slot name="icon" @click="collapsible && toggle()"></slot>
        </div>

        <!--Badge Content-->
        <transition name="content">
            <div v-if="showContent || !collapsible" class="badge-content-container">
                <!--Content-->
                <div
                    class="badge-content"
                    :class="[
                        {'-ml-0.5' : hasSlot('icon')},
                        {'ml-[1.5rem]' : temporaryDesign === 'block' && hasSlot('icon')}
                    ]"
                >
                    <slot/>
                </div>
                <!--Badge Value-->
                <div v-if="badgeValue"
                     class="badge-value"
                     :class="[
                         {'mr-0.5' : temporaryRadius > 4 && temporaryDesign !== 'elegant'},
                         badgeValue.length === 1 ? 'px-1.5' : 'px-1'
                     ]"
                >
                    {{ badgeValue }}
                </div>
                <!--Selected Icon-->
                <div v-if="selectable">
                    <!--Custom Selected Icon-->
                    <div v-if="hasSlot('selected-icon')" key="selected-icon" class="badge-select-icon" @click="select">
                        <slot name="selected-icon"></slot>
                    </div>
                    <!--Custom Unselected Icon-->
                    <div v-if="hasSlot('unselected-icon')" key="unselected-icon" class="badge-select-icon"
                         @click="select">
                        <slot name="unselected-icon"></slot>
                    </div>
                </div>
                <!--Select Indicator-->
                <div
                    v-if="selectable && selectIndicator"
                    class="badge-select-icon"
                    @click="select"
                >
                    <svg v-if="modelValue" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <svg v-else class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                    </svg>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
/*Main functions*/
import {computed, defineComponent, inject, useSlots, ref, toRefs} from "vue";

/*Sources*/
import {avatarConf, badgeConf} from "@/config";

export default defineComponent({
    name: "TBadge",
    props: {
        design: {
            type: String,
            default: null
        },
        color: {
            type: String,
            default: null
        },
        radius: {
            type: Number,
            default: null
        },
        selectable: {
            type: Boolean,
            default: false
        },
        selectIndicator: {
            type: Boolean,
            default: false
        },
        selectActiveStyle: {
            type: Object,
            default: null
        },
        selectPassiveStyle: {
            type: Object,
            default: null
        },
        modelValue: {
            type: Boolean,
            default: false
        },
        badgeValue: {
            type: [Number, String],
            default: null,
            required: false
        },
        collapsible: {
            type: Boolean,
            default: false
        }
    },
    emits: ["update:modelValue"],
    setup(props, {emit, slots}) {
        /*Definitions*/
        const {
            design,
            color,
            radius,
            selectable,
            selectActiveStyle,
            selectPassiveStyle,
            selectIndicator,
            modelValue,
            collapsible,
        } = toRefs(props);
        const showContent = ref(false);
        const value = ref(modelValue.value);
        const appConf = inject('appConf');

        /*Temporary Definitions*/
        const temporaryDesign = ref(design.value ? design.value : badgeConf.design ? badgeConf.design : appConf.design);
        const temporaryColor = ref(color.value ? color.value : badgeConf.color ? badgeConf.color : appConf.color);
        const temporaryRadius = ref(radius.value ? radius.value : badgeConf.radius ? badgeConf.radius : appConf.radius);

        /*Select*/
        const select = () => {
            value.value = !value.value;
            emit("update:modelValue", value.value);
        };

        /*Toggle*/
        const toggle = () => {
            showContent.value = !showContent.value;
        };

        /*Generating Style Classes*/
        const containerStyle = computed(() => {
            let activeColor, activeDesign, passiveStyle;
            if (selectable.value) {

                /*Select Style Check*/
                if (selectActiveStyle.value && !selectPassiveStyle.value) {
                    passiveStyle = selectActiveStyle.value;
                } else {
                    passiveStyle = selectPassiveStyle.value;
                }

                if (value.value && selectActiveStyle.value) {
                    activeColor = selectActiveStyle.value["color"];
                    activeDesign = selectActiveStyle.value["design"];
                } else if (!value.value && selectActiveStyle.value) {
                    activeColor = passiveStyle["color"];
                    activeDesign = passiveStyle["design"];
                } else {
                    activeColor = temporaryColor.value;
                    activeDesign = temporaryDesign.value;
                }
            } else {
                activeColor = temporaryColor.value;
                activeDesign = temporaryDesign.value;
            }

            return [
                `badge-${activeDesign}`,
                `badge-${activeDesign}-${activeColor}`,
                `radius-${temporaryRadius.value}`,
                ((collapsible.value || (selectable.value && !selectIndicator.value)) && "cursor-pointer"),
                (selectable.value && !modelValue.value && !selectActiveStyle.value && "filter grayscale opacity-50")
            ];
        });

        /*Slot Check*/
        const hasSlot = name => !!useSlots()[name];

        return {
            hasSlot,
            toggle,
            select,
            temporaryDesign,
            temporaryRadius,
            showContent,
            containerStyle
        };
    }
});
</script>

<style scoped>
.content-enter-active,
.content-leave-active {
    transition: all ease-in-out 1s;
}

.content-enter-from,
.content-leave-to {
    opacity: 0;
    max-width: 0;
}

.content-enter-to,
.content-leave-from {
    opacity: 1;
    max-width: 250px;
}
</style>


================================================
FILE: resources/js/Components/Breadcrumb/TBreadcrumb.vue
================================================
<template>
  <div>
    <div
      v-if="design==='filled'"
      :class="tStyle['filled']">
      <div id="breadcrumb-filled-container">
        <div
          v-for="(item,index) in breadcrumbs"
          :key="index"
          :class="filledContainerStyle(item)">
          <!--Icon-->
          <div v-if="hasSlot(item.key)">
            <slot :name="item.key" :props="item" />
          </div>
          <div>
            {{ item.label }}
          </div>
          <!--Separator Icon-->
          <svg v-if="breadcrumbs.length !== index+1" class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none"
               viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
      <div v-if="hasSlot('subContent')" class="breadcrumb-sub-content">
        <slot name="subContent"></slot>
      </div>
    </div>

    <div
      v-if="design==='block'"
      :class="tStyle['block']">
      <div id="breadcrumb-block-container" :class="tStyle['blockSub']">
        <div
          v-for="(item,index) in breadcrumbs"
          :key="index"
          :class="blockContainerStyle(item)">
          <!--Icon-->
          <div v-if="hasSlot(item.key)">
            <slot :name="item.key" :props="item" />
          </div>
          <div>
            {{ item.label }}
          </div>
        </div>
      </div>
      <div v-if="hasSlot('subContent')" class="breadcrumb-sub-content">
        <slot name="subContent"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, toRefs, computed, reactive, useSlots } from "vue";

export default defineComponent({
  name: "TBreadcrumb",
  props: {
    breadcrumbs: {
      type: Array,
      default() {
        return [];
      },
      require: true
    },
    design: {
      type: String,
      default: "filled"
    },
    color: {
      type: String,
      default: "gray"
    },
    position: {
      type: String,
      require: true,
      default: "left"
    }
  },
  setup(props, { slots }) {
    /*Definitions*/
    const { design, color, position } = toRefs(props);

    /*Generating Style Classes*/
    const tStyle = reactive({});
    tStyle["filled"] = computed(() => {
      return "breadcrumb" + " " +
        "breadcrumb-" + design.value + "-" + color.value + " " +
        "breadcrumb-" + design.value + "-base" + " " +
        (position.value === "right" ? "flex-row-reverse" : "");
    });
    const filledContainerStyle = (item) => {
      return "breadcrumb-filled-item" + " " +
        (item.active ? "breadcrumb-item-active" : "");
    };
    tStyle["block"] = computed(() => {
      return "breadcrumb" + " " +
        "breadcrumb-" + design.value + "-base" + " " +
        (position.value === "right" ? "flex-row-reverse" : "");
    });
    tStyle["blockSub"] = computed(() => {
      return "breadcrumb-" + design.value + "-" + color.value + " ";
    });
    const blockContainerStyle = (item) => {
      return "breadcrumb-block-item" + " " +
        (item.active ? "breadcrumb-item-active" : "text-gray-700");
    };

    /*Slot Check*/
    const hasSlot = name => !!useSlots()[name];

    return {
      hasSlot,
      filledContainerStyle,
      tStyle,
      blockContainerStyle
    };
  }
});
</script>


================================================
FILE: resources/js/Components/Button/TButton.vue
================================================
<script setup>
import { toRefs, ref, computed, defineAsyncComponent, reactive } from "vue";
import { Link } from "@inertiajs/vue3";

const props = defineProps({
    size: {
        type: String,
        default: "normal"
    },
    design: {
        type: String,
        default: "filled"
    },
    color: {
        type: String,
        default: "blue"
    },
    radius: {
        type: Number,
        default: 3
    },
    link: {
        type: String,
        default: "#"
    },
    border: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    },
    loading: {
        type: Boolean,
        default: false
    },
    loadingDesign: {
        type: String,
        default: "three-bars"
    },
    loadingWithContent: {
        type: Boolean,
        default: false
    },
    loadingColor: {
        type: String,
        default: null
    },
    type: {
        type: String,
        default: "submit"
    }
});

/*Definitions*/
const {
    color,
    design,
    border,
    radius,
    disabled,
    size,
    loading,
    loadingWithContent,
    loadingDesign
} = toRefs(props);

/*Generating Style Classes*/
const tStyle = reactive({});
tStyle["container"] = computed(() => {
    return "button" + " " +
        "button-" + size.value + " " +
        "button-" + design.value + "-base" + " " +
        "button-" + design.value + "-" + color.value + " " +
        "radius-" + radius.value + " " +
        (disabled.value ? " button-disabled" : "") + " " +
        (border.value ? "border" : "") + " " +
        (loading.value || loadingWithContent.value ? "pointer-events-none" : "");
});
tStyle["content"] = computed(() => {
    return "button-content" + " " +
        (loading.value ? "invisible" : "");
});


/*Loading Component*/
const activeLoadingComponent = ref();
if (loadingDesign.value === "three-bars") {
    activeLoadingComponent.value = "TLoadingAnimationThreeBars";
} else if (loadingDesign.value === "cogs") {
    activeLoadingComponent.value = "TLoadingAnimationCogs";
} else {
    activeLoadingComponent.value = "TLoadingAnimationThreeDots";
}

const loadingComponent = defineAsyncComponent(() => import(`../Loading/Animations/${activeLoadingComponent.value}.vue`));
</script>

<template>
    <button
        v-if="type === 'submit' || type === 'button' || type === 'external-link'"
        :class="tStyle['container']"
        :onclick="(!disabled && type === 'external-link') ? 'window.location.href=\'' + link + '\'' : ''"
        :type="type"
    >
        <component
            :is="loadingComponent"
            v-if="loadingWithContent"
            :color="loadingColor ? loadingColor : color"
        />

        <span :class="tStyle['content']">
            <slot />
        </span>
        <component
            :is="loadingComponent"
            v-if="loading"
            :color="loadingColor ? loadingColor : color"
            class="mx-auto absolute"
        />
    </button>
    <Link v-else :href="link" :class="tStyle['container']">
        <slot></slot>
    </Link>
</template>


================================================
FILE: resources/js/Components/Card/TContentCard.vue
================================================
<template>
  <div
      :class="[
          'relative p-4 shadow-sm w-full dark:bg-gray-800 dark:border-transparent',
          calculatedCardStyle,
          border && 'border',
          ]">
    <div :class="hasSlot('icon') ? 'flex justify-between items-center' : 'justify-start'">
      <!--Icon-->
      <div v-if="hasSlot('icon')" class="flex w-16 h-full justify-center items-center -ml-3 dark:text-gray-200">
        <slot name="icon"/>
      </div>
      <div :class="[
        'flex-grow',
        hasSlot('icon') ? 'border-l pl-2': '']">
        <!--Card Title-->
        <div v-if="hasSlot('title') || title" class="font-bold text-xl dark:text-gray-200">
          <span v-if="title" v-text="title"/>
          <slot v-else name="title"/>
        </div>
        <!--Card Subtitle-->
        <div v-if="hasSlot('subTitle') || subTitle" class="text-sm dark:text-gray-400">
          <span v-if="subTitle" v-text="subTitle"/>
          <slot v-else name="subTitle"/>
        </div>
        <!--Separator-->
        <hr v-if="line" :class="'my-1 border'"/>
        <div class="flex flex-wrap whitespace-normal w-full">
          <!--Card Main Content-->
          <slot v-if="!showSecondContent" name="content"></slot>
          <slot v-if="!showSecondContent"></slot>
          <!--Card Second Content-->
          <slot v-if="showSecondContent" name="secondContent"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, useSlots } from "vue";
import {contentCardStyleMixin} from "@/Mixins/Styles/contentCardStyleMixin";

export default defineComponent({
  name: "TContentCard",
  mixins: [contentCardStyleMixin],
  props: {
    title: {
      type: String,
      default: null,
      required: false
    },
    subTitle: {
      type: String,
      default: null,
      required: false
    },
    line: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
  },
  setup(props, {slots}){
    /*Definitions*/
    const showSecondContent = ref(false)

    /*Slot Check*/
    const hasSlot = name => !!useSlots()[name];

    return {hasSlot,showSecondContent}
  }
})
</script>


================================================
FILE: resources/js/Components/Card/TStatisticWidget.vue
================================================
<template>
  <!--Widget Main Container-->
  <t-content-card
      :border="true"
      :color="color"
      :gradient-direction="gradientDirection"
      :radius="radius"
      :width="width"
  >
    <template #content>
      <!--Widget Content-->
      <div class="statistic-widget">
        <!--Widget Data Area-->
        <div class="statistic-widget-data">
          <!--Widget Title-->
          <div class="statistic-widget-title">
            <slot name="title"/>
          </div>
          <!--Widget Value-->
          <div class="statistic-widget-value">
            {{ widgetValue }}
          </div>
          <!--Diff Value-->
          <div
              v-if="diffValue"
              :class="[
                  'statistic-widget-diff-value',
                  calculatedDiffStyle
                  ]"
          >
            <span
                v-if="diffDirection"
                v-text="diffDirection.includes('up') ? '+' :  '-'"
            ></span>
            {{ diffValue }}
            <t-chevron-up-icon v-if="diffDirection.includes('up')" class="w-4 h-4"/>
            <t-chevron-down-icon v-if="diffDirection.includes('down')" class="w-4 h-4"/>
          </div>
        </div>
        <!--Widget Chart Area-->
        <!--TODO: Chart feature-->
        <!--<div v-if="chartType && !icon" class="flex w-full justify-end h-28">
          <component
              :is="chartType"
              :chartdata="widget.chartdata"
              :options="widget.options"
              :styles="widget.styles"/>
        </div>-->
        <!--Icon Area-->
        <div v-if="$slots.icon" class="statistic-widget-icon-container">
                    <span
                        :class="['statistic-widget-icon',calculatedIconStyle]">
                        <slot name="icon"/>
                    </span>
        </div>
        <!--Picture Area-->
        <div v-if="$slots.picture" class="statistic-widget-picture-container">
                    <span
                        :class="['statistic-widget-picture',calculatedIconStyle]">
                        <slot name="picture"/>
                    </span>
        </div>
      </div>
    </template>
  </t-content-card>
</template>

<script>
import { defineComponent } from 'vue'
import {statisticWidgetStyleMixin} from "@/Mixins/Styles/statisticWidgetStyleMixin";
import TContentCard from "@/Components/Card/TContentCard.vue";
import TChevronUpIcon from "@/Components/Icon/TChevronUpIcon.vue";
import TChevronDownIcon from "@/Components/Icon/TChevronDownIcon.vue";

export default defineComponent({
  name: "TStatisticWidget",
  components: {
    TChevronDownIcon,
    TChevronUpIcon,
    TContentCard,
    /*'bar-chart': () => import('@/Components/Chart/TBarChart'),
    'line-chart': () => import('@/Components/Chart/TLineChart'),
    'pie-chart': () => import('@/Components/Chart/TPieChart'),
    'polar-chart': () => import('@/Components/Chart/TPolarChart'),
    'radar-chart': () => import('@/Components/Chart/TRadarChart'),*/
  },
  mixins: [statisticWidgetStyleMixin],
  props: {
    radius: {
      required: false
    },
    width: {
      type: Number,
      required: false,
      default: 1
    },
    widgetValue: {
      required: true
    },
    diffValue: {
      required: false
    },
    /*chartType: {
      required: false,
      default: 'Bar'
    }*/
  },
  data() {
    return {
      /*TODO: Chart feature*/
      /*widget: {
          chartdata: {
              labels: ['January', 'February', 'April', 'March', 'June'],
              datasets: [
                  {
                      fill: false,
                      tension: 0.1,
                      borderColor: '#FFFE12',
                      data: [40, 20, 15, 55, 41]
                  },
                  {
                      label: '12',
                      fill: false,
                      tension: 0.1,
                      borderColor: '#00FF',
                      data: [5, 11, 52, 32, 15]
                  },
              ]
          },
          options: {
              plugins: {
                  legend: false,
              },
              elements: {
                  point: {
                      radius: 8,
                      pointStyle: 'circle'
                  },
              },
              responsive: true,
              maintainAspectRatio: false,
              animations: {
                  tension: {
                      duration: 1000,
                      easing: 'linear',
                      from: 1,
                      to: 0,
                      loop: true
                  }
              },
              scales: {
                  display: false,
                  y: { // defining min and max so hiding the dataset does not change scale range
                      min: 0,
                      max: 100,
                      labels: {
                          display: false
                      },
                      ticks: {
                          display: false
                      }
                  }
              }
          },
          styles: {
              height: '100%'
          }
      }*/
    }
  }
})
</script>



================================================
FILE: resources/js/Components/Chart/TBarChart.vue
================================================
<script>
import { defineComponent } from 'vue'
import { Bar } from 'vue-chartjs'

export default defineComponent({
  name : 'BarChart',
  extends: Bar,
  props: {
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
})
</script>


================================================
FILE: resources/js/Components/Chart/TDoughnutChart.vue
================================================
<script>
import { defineComponent } from 'vue'
import { Doughnut } from 'vue-chartjs'

export default defineComponent({
    name : 'DoughnutChart',
    extends: Doughnut,
    props: {
        chartdata: {
            type: Object,
            default: null
        },
        options: {
            type: Object,
            default: null
        }
    },
    mounted () {
        this.renderChart(this.chartdata, this.options)
    }
})
</script>


================================================
FILE: resources/js/Components/Chart/TLineChart.vue
================================================
<script>
import { defineComponent } from 'vue'
import { Line } from 'vue-chartjs'

export default defineComponent({
    name : 'LineChart',
    extends: Line,
    props: {
        chartdata: {
            type: Object,
            default: null
        },
        options: {
            type: Object,
            default: null
        }
    },
    mounted () {
        this.renderChart(this.chartdata, this.options)
    }
})
</script>


================================================
FILE: resources/js/Components/Chart/TPieChart.vue
================================================
<script>
import { defineComponent } from 'vue'
import { Pie } from 'vue-chartjs'

export default defineComponent({
  name : 'PieChart',
  extends: Pie,
  props: {
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
})
</script>


================================================
FILE: resources/js/Components/Chart/TPolarChart.vue
================================================
<script>
import { defineComponent } from 'vue'
import { PolarArea } from 'vue-chartjs'

export default defineComponent({
  name : 'PolarChart',
  extends: Polar,
  props: {
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
})
</script>


================================================
FILE: resources/js/Components/Chart/TRadarChart.vue
================================================
<script>
import { defineComponent } from 'vue'
import { Radar } from 'vue-chartjs'

export default defineComponent({
  name : 'RadarChart',
  extends: Radar,
  props: {
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
})
</script>


================================================
FILE: resources/js/Components/Code/TCodeShowcase.vue
================================================
<template>
    <!-- Container -->
    <div class="flex flex-col w-full">
        <!-- Live Demo -->
        <div
            class="p-4 rounded-t bg-slate-200 dark:bg-transparent dark:shadow border border-b-0 border-slate-400 dark:border-slate-800"
        >
            <slot></slot>
        </div>
        <!-- Footer -->
        <div
            class="flex overflow-hidden border-l border-r bg-slate-500 text-sm dark:bg-slate-900 border-slate-400 dark:border-0 text-slate-100 transition-all duration-300"
            :class="{
                'rounded-b': !activeTab
            }"
        >
            <!-- Tab Title -->
            <div class="flex justify-start items-center space-x-6">
                <template v-for="tab in tabs" :key="tab.id">
                    <span
                        @click="tab.command ? tab.command() : selectTab(tab.id)"
                        class="flex items-center justify-center space-x-2 hover:bg-slate-600 dark:hover:bg-slate-800/75 cursor-pointer px-4 py-2 select-none transition-colors duration-300"
                    >
                        <slot v-if="$slots['label']" name="label" :tab="tab"></slot>
                        <span v-else v-text="tab.label"></span>
                    </span>
                </template>
            </div>
        </div>
        <!-- Selected Content -->
        <transition name="fade">
            <div
                v-if="activeTab"
                class="border border-t-0 rounded-b-md border-slate-400 dark:border-0"
            >
                <template v-for="tab in tabs" :key="tab.id">
                    <!-- Regular Content -->
                    <slot v-if="activeTab === tab.id && tab.type !== 'code'" :name="tab.id"></slot>

                    <!-- Code Content -->
                    <pre v-if="activeTab === tab.id && tab.type === 'code'" v-highlightjs>
                        <code class="rounded-b overflow-scroll" :class="tab.codeLang"><slot :name="tab.id"></slot></code>
                    </pre>

                    <!-- Table -->
                    <div
                        v-if="activeTab === tab.id && tab.type === 'table'"
                        class="p-2 space-y-2 bg-slate-200 dark:bg-slate-800 rounded-b"
                    >
                        <!-- Content -->
                        <div
                            v-for="row in tab.table.content"
                            :key="row"
                            class="bg-slate-300 border border-slate-400 dark:border-transparent dark:bg-slate-500 rounded p-2"
                        >
                            <!-- Row -->
                            <template v-for="header in tab.table.headers" :key="header">
                                <div
                                    v-if="row[header.id]"
                                    class="flex p-1 group border-b last:border-0 border-slate-600 hover:bg-slate-500 hover:-translate-y-[.2rem] dark:hover:bg-slate-600 hover:text-slate-100 hover:rounded hover:border-transparent"
                                    :class="header.id === 'description' ? 'flex-col' : 'justify-between'"
                                >
                                    <!-- Header -->
                                    <span
                                        class="float-left after:content-[':'] font-semibold"
                                    >{{ header.label }}</span>

                                    <!-- Regular Field -->
                                    <span
                                        v-if="(typeof row[header.id] !== 'object')"
                                        :class="{
                                            'italic bg-slate-400/50 rounded p-2': header.id === 'description'
                                        }"
                                    >{{ row[header.id] }}</span>

                                    <!-- Object and Array Field -->
                                    <span v-else class="pl-10 text-right">
                                        <span
                                            v-for="item in row[header.id]"
                                            :key="item"
                                            class="mr-1 last:mr-0 select-all"
                                            :class="{
                                                'font-semibold bg-slate-200/50 border border-sky-800/20 group-hover:bg-slate-300 group-hover:text-slate-700 dark:bg-blue-100/50 px-1 rounded': header.colorfulBg
                                            }"
                                        >{{ item }}</span>
                                    </span>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </transition>
    </div>
</template>

<script>
import { defineComponent, nextTick, ref } from 'vue'

export default defineComponent({
    name: "TCodeShowCase",
    props: {
        tabs: {
            type: Array,
            default() {
                return [
                    { id: 'js', label: 'JS', type: 'code', codeLang: 'javascript' },
                    { id: 'template', label: 'Template', type: 'code', codeLang: 'html' },
                    { id: 'props', label: 'Props' }
                ]
            }
        }
    },
    setup() {
        /* Select Tab */
        const activeTab = ref();
        const selectTab = (id) => {
            if (activeTab.value !== id) {
                activeTab.value = null
                nextTick(() => {
                    activeTab.value = id
                });
            } else {
                activeTab.value = null
            }
        }

        return { activeTab, selectTab }
    },
})
</script>

<style scoped>
.fade-enter-active,
.face-leave-active {
    transition: all 300ms ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0.5;
}
.fade-leave-from,
.fade-enter-to {
    opacity: 1;
}
</style>


================================================
FILE: resources/js/Components/Collapsible/TCollapsible.vue
================================================
<template>
  <div class="flex w-full">
    <div :class="tStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, provide, ref, toRefs } from "vue";

export default defineComponent({
  name: "Collapsible",
  props: {
    openingType: {
      type: String,
      default: "click"
    },
    radius: {
      type: Number,
      default: 3
    },
    accordion: {
      type: Boolean,
      default: false
    },
    triggerType: {
      type: String,
      default: "chevron"
    },
    separated: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: Array,
      default(){
        return []
      }
    },
    color: {
      type: String,
      default: null
    },
    design: {
      type: String,
      default: null
    },
    titleAlign: {
      type: String,
      default: null
    },
    triggerAlign: {
      type: String,
      default: null
    }
  },
  setup(props) {
    /*Definitions*/
    const {
      openingType,
      modelValue,
      triggerType,
      separated,
      radius,
      color,
      design,
      titleAlign,
      triggerAlign,
      accordion
    } = toRefs(props);

    /*Provide*/
    provide("openingType", ref(openingType));
    provide("activeItems", ref(modelValue.value));
    provide("radius", ref(radius));
    provide("accordion", ref(accordion));
    provide("separated", ref(separated));
    provide("rootColor", ref(color));
    provide("rootDesign", ref(design));
    provide("rootTitleAlign", ref(titleAlign));
    provide("rootTriggerAlign", ref(triggerAlign));
    provide("rootTriggerType", ref(triggerType));

    /*Generating Style Classes*/
    const tStyle = computed(() => {
      return "collapsible" + " " +
        (separated.value ? "space-y-2" : "group-radius-" + radius.value);
    });

    return { tStyle };
  }
});
</script>


================================================
FILE: resources/js/Components/Collapsible/TCollapsibleItem.vue
================================================
<template>
  <div :class="tStyle['container']">
    <!--Inline Line-->
    <div v-if="activeDesign === 'inline'"
         id="line"
         class="collapsible-inline-line"
    />
    <div class="w-full">
      <!--Header-->
      <div
        :class="tStyle['header']"
        @click="updateStatus"
        @mouseenter.passive="openingType.includes('hover') ? updateStatus('open') :''"
      >
        <!--Title-->
        <div :class="tStyle['title']">
          <slot name="title" />
        </div>
        <!--DropDown Icons-->
        <!--Chevron-->
        <svg v-if="activeTriggerType==='chevron'" :class="tStyle['trigger']" xmlns="http://www.w3.org/2000/svg"
             fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
        <!--Cross-->
        <svg v-else :class="tStyle['trigger']" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
             stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </div>
      <!--Content-->
      <transition name="content">
        <div v-show="isVisibleContent">
          <div :class="tStyle['content']">
            <slot name="content"></slot>
          </div>
        </div>

      </transition>
    </div>
  </div>
</template>

<script>
import { defineComponent, inject, toRefs, reactive, computed } from "vue";
import { uniqueId } from "lodash";

export default defineComponent({
  name: "CollapsibleItem",
  props: {
    itemKey: {
      type: [String, Number],
      default: uniqueId()
    },
    titleAlign: {
      type: String,
      default: "left"
    },
    triggerAlign: {
      type: String,
      default: "right"
    },
    triggerType: {
      type: String,
      default: null,
      require: false
    },
    design: {
      type: String,
      default: "filled"
    },
    color: {
      type: String,
      default: "white"
    }
  },
  emits: ["active"],
  setup(props, { emit }) {
    /*Definitions*/
    const { itemKey, titleAlign, triggerAlign, triggerType, design, color } = toRefs(props);

    /*Injections*/
    const activeItems = inject("activeItems");
    const openingType = inject("openingType");
    const accordion = inject("accordion");
    const radius = inject("radius");
    const separated = inject("separated");
    const rootColor = inject("rootColor");
    const rootDesign = inject("rootDesign");
    const rootTitleAlign = inject("rootTitleAlign");
    const rootTriggerAlign = inject("rootTriggerAlign");
    const rootTriggerType = inject("rootTriggerType");

    /*Taken Over Definitions from Root */
    const activeColor = computed(() => {
      return rootColor.value ? rootColor.value : color.value;
    });
    const activeDesign = computed(() => {
      return rootDesign.value ? rootDesign.value : design.value;
    });
    const activeTitleAlign = computed(() => {
      return rootTitleAlign.value ? rootTitleAlign.value : titleAlign.value;
    });
    const activeTriggerAlign = computed(() => {
      return rootTriggerAlign.value ? rootTriggerAlign.value : triggerAlign.value;
    });
    const activeTriggerType = computed(() => {
      return rootTriggerType.value ? rootTriggerType.value : triggerType.value;
    });

    /*Detection of Active Items*/
    const isVisibleContent = computed(() => {
      return activeItems.value.includes(itemKey.value);
    });


    /*Open-Close Actions*/
    const updateStatus = (rule) => {
      /*Open Function*/
      const openItem = () => {
        if (accordion.value && !activeItems.value.includes(itemKey.value)) {
          activeItems.value = [itemKey.value];
        } else if (!accordion.value && !activeItems.value.includes(itemKey.value)) {
          activeItems.value.push(itemKey.value);
        }
        emit("active", activeItems.value);
      };
      /*Close Function*/
      const closeItem = () => {
        if (activeItems.value.includes(itemKey.value)) {
          activeItems.value.splice(activeItems.value.indexOf(item => item === itemKey.value), 1);
        }
        emit("active", activeItems.value);
      };
      /*Open/Close Action Controller*/
      if (rule === "open") {
        openItem();
      } else if (rule === "close") {
        closeItem();
      } else {
        if (isVisibleContent.value) {
          closeItem();
        } else {
          openItem();
        }
      }
    };

    /*Generating Style Classes*/
    const tStyle = reactive({});
    tStyle["container"] = computed(() => {
      return "collapsible-container " +
        "collapsible-" + activeDesign.value + "-base " +
        "collapsible-" + activeDesign.value + "-" + activeColor.value + " " +
        (separated.value ? "radius-" + radius.value + " border-0" : "") + " " +
        (activeDesign.value.valueOf().includes("line") ? "justify-between" : "flex-col");
    });
    tStyle["header"] = computed(() => {
      let triggerAlignStyle;
      /*Trigger Position*/
      if (activeTriggerAlign.value === "left") {
        triggerAlignStyle = "flex-row-reverse";
      } else {
        triggerAlignStyle = "justify-start";
      }

      return "collapsible-header " +
        triggerAlignStyle;
    });
    tStyle["trigger"] = computed(() => {
      let triggerAnimationStyle;
      if (isVisibleContent.value && activeTriggerType.value === "chevron" || activeTriggerType.value === "cross") {
        triggerAnimationStyle = "rotate-0";
      }

      if (!isVisibleContent.value && activeTriggerType.value === "chevron") {
        if (activeTriggerAlign.value === "right") {
          triggerAnimationStyle = "rotate-90";
        } else {
          triggerAnimationStyle = "-rotate-90";
        }
      }

      if (!isVisibleContent.value && activeTriggerType.value === "cross") {
        triggerAnimationStyle = "rotate-45";
      }

      return "collapsible-trigger-icon " +
        triggerAnimationStyle;
    });
    tStyle["title"] = computed(() => {
      let titleAlignStyle;
      if (activeTitleAlign.value === "left") {
        titleAlignStyle = "text-left";
      } else if (activeTitleAlign.value === "center") {
        titleAlignStyle = "justify-center";
      } else {
        titleAlignStyle = "flex-row-reverse";
      }

      return "collapsible-title " + titleAlignStyle;
    });
    tStyle["content"] = computed(() => {
      return "collapsible-content ";
    });

    return {
      isVisibleContent,
      openingType,
      updateStatus,
      tStyle,
      activeTriggerType,
      activeDesign
    };
  }
});
</script>

<style>
.content-enter-active, .content-leave-active {
  transition: all 300ms ease-in-out;
}

.content-enter-from, .content-leave-to {
  max-height: 0;
}

.content-enter-to, .content-leave-from {
  max-height: 100vmax;
}
</style>


================================================
FILE: resources/js/Components/Dropdown/TDropdown.vue
================================================
<template>
  <div class="dropdown" ref="dropDownItem">

    <!--Trigger as a Simple Trigger-->
    <div
      v-if="triggerType === 'button'"
      :class="tStyle['buttonTrigger']"
      @click="updateStatus"
    >
      <t-button type="button" :color="buttonColor" :design="buttonDesign" :size="buttonSize">
        <slot name="trigger" />
        <t-chevron-down-icon :class="tStyle['triggerIcon']" />
      </t-button>

    </div>

    <!--Trigger as a Rich Item-->
    <div
      class="dropdown-rich-trigger"
      v-if="triggerType === 'rich'"
      @click="updateStatus"
    >
      <slot name="trigger" />
    </div>

    <!--Content-->
    <transition name="dropDown">
      <div v-if="isVisible" class="dropdown-content-container">
        <!--Button Trigger Content-->
        <div
          v-if="triggerType === 'button'"
          :class="tStyle['buttonTriggerContent']">
          <slot />
        </div>
        <!--Rich Trigger Content-->
        <div
          v-if="triggerType === 'rich'"
          :class="tStyle['richTriggerContent']"
        >
          <slot />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { computed, defineComponent, provide, reactive, ref, toRefs } from "vue";
import { onClickOutside } from "@vueuse/core";
import TChevronDownIcon from "@/Components/Icon/TChevronDownIcon.vue";
import TButton from "@/Components/Button/TButton.vue";

export default defineComponent({
  name: "TDropdown",
  components: { TButton, TChevronDownIcon },
  props: {
    align: {
      type: String,
      default: "left"
    },
    buttonColor: {
      type: String,
      default: "blue"
    },
    buttonDesign: {
      type: String,
      default: "filled"
    },
    buttonSize: {
      type: String,
      default: "normal"
    },
    size: {
      type: String,
      default: "wide"
    },
    triggerType: {
      type: String,
      default: "button"
    },
    radius: {
      type: Number,
      default: 3
    }
  },
  setup(props) {
    /*Definitions*/
    const { align, size, radius, triggerType } = toRefs(props);
    const isVisible = ref(false);
    const dropDownItem = ref(null);

    /*Provides*/
    provide("triggerType", ref(triggerType));

    /*Open-Close Actions*/
    const updateStatus = () => {
      isVisible.value = !isVisible.value;
    };
    onClickOutside(dropDownItem, () => isVisible.value = false);

    /*Generating Style Classes*/
    const tStyle = reactive({})
    tStyle['buttonTrigger'] = computed(() => {
      return "dropdown-button-trigger" + " " +
        "radius-" + radius.value;
    });
    tStyle['content'] = computed(() => {
      return "dropdown-content-" + align.value + " " +
        "dropdown-content-" + size.value;
    });
    tStyle['buttonTriggerContent'] = computed(() => {
      return "dropdown-button-trigger-content" + " " +
        tStyle['content'];
    });
    tStyle['richTriggerContent'] = computed(() => {
      return "dropdown-rich-trigger-content" + " " +
        tStyle['content'];
    });
    tStyle['triggerIcon'] = computed(() => {
      return "dropdown-trigger-icon " +
        (isVisible.value ? "rotate-90" : "rotate-0");
    });

    return {
      isVisible,
      updateStatus,
      dropDownItem,
      tStyle
    };
  }
});
</script>

<style scoped>
.dropDown-enter-active, .dropDown-leave-active {
  transition: all ease-in-out 300ms;
  z-index: 9999;
}

.dropDown-enter-from, .dropDown-leave-to {
  transform: scaleY(.75) scaleX(.75);
  opacity: 0;
}

.dropDown-enter-to, .dropDown-leave-from {
  transform: scaleY(1) scaleX(1);
  opacity: 1;
}
</style>


================================================
FILE: resources/js/Components/Dropdown/TDropdownItem.vue
================================================
<template>
  <div class="dropdown-item-container">
    <Link
      :href="link"
      v-if="link"
      class="dropdown-item"
    >
      <div v-if="hasSlot('icon')" class="dropdown-icon">
        <slot name="icon"></slot>
      </div>
      <div class="flex">
        <slot></slot>
      </div>
    </Link>
    <slot v-else></slot>

  </div>
</template>

<script>
import { defineComponent, useSlots } from "vue";
import { Link } from "@inertiajs/vue3";

export default defineComponent({
  name: "TDropdownItem",
  components: {
    Link
  },
  props: {
    link: {
      type: String,
      default: null
    }
  },
  setup(props,{slots}) {

    /*Slot Check*/
    const hasSlot = name => !!useSlots()[name];

    return { hasSlot };
  }
});
</script>


================================================
FILE: resources/js/Components/Form/Inputs/TInputBetween.vue
================================================
<template>
    <div class="grid grid-cols-12 gap-4">
        <!--From : Text Input-->
        <t-input-text
            class="col-span-5"
            placeholder="from"
            :model-value="modelValue.from"
        />
        <!--Divider-->
        <span class="col-span-2 flex justify-center items-center">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </span>
        <!--To : Text Input-->
        <t-input-text
            class="col-span-5"
            placeholder="to"
            :model-value="modelValue.to"
        />
    </div>
</template>

<script>
import TInputText from "@/Components/Form/Inputs/TInputText.vue";

export default {
    name: "TInputBetween",
    components: {TInputText},
    props: {
        modelValue: {
            type: Object,
            default() {
                return {
                    from: null,
                    to: null
                }
            }
        },
        inputType: {
            type: String,
            default: 'text'
        }
    },
    emits: ['update:modelValue'],
    setup() {
    }
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Components/Form/Inputs/TInputCheckBox.vue
================================================
<template>
    <!--TODO:Styles will be separated-->
    <div class="flex flex-row items-center" @click="!disabled && updateField()">
        <div
            :class="[
                'flex flex-shrink-0 justify-center items-center w-5 h-5 border mr-1',
                isChecked && 'bg-'+color+'-100',
                checkboxStyle(),
                radiusStyle
                ]">
            <div v-if="isChecked" :class="'text-'+color+'-500'">

                <slot v-if="$slots.icon" name="icon"/>
                <div v-else :class="['flex w-3 h-3',defaultSelectorStyle(),radiusStyle]"></div>
            </div>
        </div>

        <!--Label-->
        <span v-if="label" v-text="label" class="whitespace-nowrap"></span>
    </div>
</template>

<script>
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
import TCheckIcon from "@/Components/Icon/TCheckIcon.vue";
import {computed, defineComponent, ref, toRefs} from "vue";

export default defineComponent({
    name: 'TInputCheckBox',
    components: {TCheckIcon},
    mixins: [radiusSizeMixin],
    props: {
        modelValue: [Array, Boolean],
        inputValue: String,
        multipleOption: {
            type: Boolean,
            default: false
        },
        label: String,
        color: {
            type: String,
            default: 'white'
        },
        id: String,
        disabled: Boolean
    },
    emits: ['update:modelValue'],
    setup(props, {emit}) {
        /*Definitions*/
        const {multipleOption, color, inputValue, modelValue} = toRefs(props)

        /*Generating Style Classes*/
        const checkboxStyle = () => {
            let style;
            if (color.value === 'white') {
                style = 'bg-white hover:bg-blue-100 checked:bg-indigo-200 border-gray-300 text-gray-600'
            } else if (color.value === 'black') {
                style = 'bg-white hover:bg-gray-500 checked:bg-indigo-200 border-black text-gray-100'
            } else {
                style = 'bg-white hover:bg-' + color.value + '-200 active:bg-' + color.value + '-200 border-' + color.value + '-500'
            }
            return style
        }

        const defaultSelectorStyle = () => {
            let style;
            if (color.value === 'white') {
                style = 'bg-gray-500'
            } else if (color.value === 'black') {
                style = 'bg-gray-800'
            } else {
                style = 'bg-' + color.value + '-500'
            }
            return style
        }

        /*Default Value Control*/
        const isChecked = computed(() => {
            if (multipleOption.value) {
                return modelValue.value.includes(inputValue.value)
            }
            return !!modelValue.value
        })

        /*Update Action*/
        const updateField = () => {
            let newValue = modelValue.value
            if (multipleOption.value) {
                if (!modelValue.value.includes(inputValue.value)) {
                    newValue.push(inputValue.value);
                } else {
                    newValue.splice(modelValue.value.indexOf(inputValue.value), 1);
                }
            } else {
                newValue = !newValue
            }
            emit('update:modelValue', newValue);
        }

        return {isChecked, checkboxStyle, defaultSelectorStyle, updateField}
    }
})
</script>


================================================
FILE: resources/js/Components/Form/Inputs/TInputDate.vue
================================================
<template>
    <date-picker
        v-model="date"
        :is24hr="is24hr"
        :isRange="isRange"
        :masks="{ type: 'string', mask: masks }"
        :mode="mode"
    >
        <template v-slot="{ inputValue, inputEvents, togglePopover }">
            <div class="relative flex items-center">
                <t-input-text
                    v-if="!isRange"
                    :modelValue="inputValue"
                    v-on="inputEvents"
                    :placeholder="masks"
                    @click="togglePopover()"
                    :radius="temporaryRadius"
                >
                    <template #append>
                        <div class="flex px-1 overflow-hidden">
                            <!-- Clear Icon -->
                            <icon
                                icon="times-circle"
                                v-if="!isRange && date && clearButton"
                                class="cursor-pointer hover:text-red-500 mr-2"
                                @click="date = null"
                            />

                            <!-- Icon -->
                            <icon
                                :icon="mode.toLowerCase().includes('time') && !mode.toLowerCase().includes('date') ? 'clock' : mode.toLowerCase().includes('date') && !mode.toLowerCase().includes('time') ? 'calendar' : 'calendar-minus'"
                                v-if="mode"
                                @click="togglePopover()"
                            />
                        </div>
                    </template>
                </t-input-text>
                <div
                    v-if="isRange"
                    class="input flex-wrap sm:justify-between items-center pl-2 cursor-pointer w-full overflow-hidden"
                    :class="`radius-${temporaryRadius}`"
                    @click="togglePopover()"
                >
                    <div v-if="date">
                        <span class="text-center mr-1 py-1 whitespace-nowrap">
                            <b>Start:</b>
                        </span>
                        {{ inputValue.start }}
                    </div>
                    <div v-if="date">
                        <span class="text-center mr-3 py-1 whitespace-nowrap">
                            <b>End:</b>
                        </span>
                        {{ inputValue.end }}
                    </div>
                    <div v-if="isRange && !date">Please click for select</div>
                    <div class="flex min-w-[2.5rem] justify-center text-input-append">
                        <!-- Clear Icon -->
                        <icon
                            icon="times-circle"
                            v-if="isRange && date"
                            class="cursor-pointer hover:text-red-500 mr-2"
                            @click="date = null"
                        />

                        <!-- Icon -->
                        <icon
                            :icon="mode.toLowerCase().includes('time') && !mode.toLowerCase().includes('date') ? 'clock' : mode.toLowerCase().includes('date') && !mode.toLowerCase().includes('time') ? 'calendar' : 'calendar-minus'"
                            v-if="mode"
                            @click="togglePopover()"
                        />
                    </div>
                </div>
            </div>
        </template>
    </date-picker>
</template>

<script>
/* Main function */
import { defineComponent, toRefs, ref, watch, inject } from 'vue';
import { DatePicker } from 'v-calendar';
import 'v-calendar/style.css';
/* Components */
import TInputText from '@/Components/Form/Inputs/TInputText.vue';

/*Sources*/
import { inputDateConf } from "@/config";

/*Fontawesome icons*/
import { library } from "@fortawesome/fontawesome-svg-core";
import { faClock, faCalendar, faCalendarMinus, faTimesCircle } from "@fortawesome/free-solid-svg-icons";

library.add(faClock, faCalendar, faCalendarMinus, faTimesCircle)

export default defineComponent({
    props: {
        modelValue: {
            type: [String, Array, Object],
            default: null
        },
        mode: {
            type: String,
            default: 'date'
        },
        masks: {
            type: String,
            default: 'DD-MM-YYYY'
        },
        is24hr: {
            type: Boolean,
            default: false
        },
        isRange: {
            type: Boolean,
            default: false
        },
        radius: {
            type: Number,
            default: null
        },
        clearButton: {
            type: Boolean,
            default: true
        },
    },
    components: {
        TInputText,
        DatePicker,
    },
    emits: ['update:modelValue'],
    setup(props, { emit }) {
        const { modelValue, radius } = toRefs(props);
        const date = ref(modelValue.value ? modelValue.value : new Date())
        const inertnalDate = ref(null)
        const appConf = inject('appConf');

        /*Temporary Definations*/
        const temporaryRadius = ref(radius.value ? radius.value : inputDateConf.radius ? inputDateConf.radius : appConf.value.radius)

        watch(modelValue, () => {
            date.value = modelValue.value
        })

        watch(date, () => {
            emit('update:modelValue', date.value)
        })

        return {
            temporaryRadius,
            inertnalDate,
            date
        }
    }
})
</script>

<style scoped>
* >>> select {
    background-image: none;
}
</style>


================================================
FILE: resources/js/Components/Form/Inputs/TInputFile.vue
================================================
<template>
    <div>
        <!--Preview-->
        <div
            v-if="files.length>0 && preview && !multiple"
            :class="['flex justify-center items-center my-2 overflow-hidden',radiusStyle]"
        >
            <img v-if="files[0].type.split('/')[0] === 'image'" :class="['max-h-36 w-auto p-1 border',radiusStyle]"
                 :src="files[0] | urlGenerator"/>
        </div>
        <!--Input-->
        <div :class="['flex border items-center overflow-hidden',radiusStyle]">
            <input ref="input" class="hidden" type="file" :multiple="multiple" @change="updateFile"/>
            <!--Single File Title & Size-->
            <div v-if="!multiple && files.length>0"
                 class="flex flex-wrap flex-grow overflow-hidden p-2 justify-between items-center">
                <!--File Title-->
                <div class="flex overflow-hidden whitespace-nowrap">
                    {{ files[0].name }}
                </div>
                <!--File Size-->
                <div class="flex overflow-hidden whitespace-nowrap">
                    Size: {{ files[0].size | sizeCalculator }}
                </div>
            </div>
            <!--Multiple File-->
            <div v-else class="flex px-4 overflow-hidden whitespace-nowrap w-full">
                {{ files.length === 0 ? 'Please select some files' : files.length + ' files added' }}
            </div>
            <!--Buttons-->
            <div class="flex flex-grow-0 flex-shrink-0 items-center space-x-2">
                <button
                    v-if="files[0]"
                    class="input-clear-button"
                    type="button"
                    @click="clearFile"
                >
                  <svg class="input-clear-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
                <button
                    class="form-control min-h-10 px-2 border-l outline-none focus:outline-none whitespace-nowrap"
                    type="button"
                    @click="$refs.input.click()"
                >
                    {{ browseLabel }}
                </button>
            </div>
        </div>
        <!--Multiple File Area-->
        <transition name="fade">
            <div v-if="files.length>0 && multiple" :class="['flex flex-col border w-full p-4 mt-2',radiusStyle]">
                <transition-group name="fade" tag="div">
                    <div v-for="(item,index) in files"
                         :class="['flex flex-wrap justify-between items-center border p-2 w-full my-1',radiusStyle]"
                         :key="item.index">
                        <!--Left Area-->
                        <div class="flex justify-start items-center gap-4">
                            <!--File Preview-->
                            <div v-if="preview">
                                <img v-if="item.type.split('/')[0] === 'image'" :class="['h-14 w-14 p-1 border object-cover',radiusStyle]" :src="item | urlGenerator"/>
                                <t-video-icon v-else-if="item.type.split('/')[0] === 'video'" :class="['w-14 h-14 p-3 border text-gray-600',radiusStyle]"/>
                                <t-audio-icon v-else-if="item.type.split('/')[0] === 'audio'" :class="['w-14 h-14 p-3 border text-gray-600',radiusStyle]"/>
                                <div v-else :class="['relative flex justify-center items-center w-14 h-14 border text-gray-600',radiusStyle]">

                                    <t-document-icon class="w-12 h-12"/>
                                    <span class="absolute flex pt-0.5 w-10 rounded-md items-center justify-center bg-gray-600 text-white top-5 text-sm font-semibold overflow-hidden">
                                       {{ item.name | upperCase}}
                                   </span>
                                </div>
                            </div>
                            <!--File Name-->
                            <span class="font-semibold">
                            {{ item.name }}
                        </span>
                        </div>
                        <!--Right Area-->
                        <div class="flex justify-between items-center gap-4">
                            <!--File Size-->
                            <span>
                                <t-badge>
                                    {{ item.size | sizeCalculator }}
                                </t-badge>
                            </span>
                            <!--Delete Button-->
                            <t-button type="button" color="red" @click.native="deleteFile(index)">
                                <t-trash-icon class="w-5 h-5"/>
                            </t-button>
                        </div>
                    </div>
                </transition-group>
            </div>
        </transition>

    </div>
</template>

<script>
import TButton from "@/Components/Button/TButton.vue";
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
import Button from "@/Pages/Samples/Components/Button.vue";
import TXIcon from "@/Components/Icon/TXIcon.vue";
import TTrashIcon from "@/Components/Icon/TTrashIcon.vue";
import TBadge from "@/Components/Badge/TBadge.vue";
import TPaperClipIcon from "@/Components/Icon/TPaperClipIcon.vue";
import TAudioIcon from "@/Components/Icon/TAudioIcon.vue";
import TVideoIcon from "@/Components/Icon/TVideoIcon.vue";
import TDocumentIcon from "@/Components/Icon/TDocumentIcon.vue";

export default {
    name: "TInputFile",
    components: {TDocumentIcon, TVideoIcon, TAudioIcon, TPaperClipIcon, TBadge, TTrashIcon, TXIcon, Button, TButton},
    mixins: [radiusSizeMixin],
    props: {
        value: {},
        multiple: {
            type: Boolean,
            default: false
        },
        browseLabel: {
            default: 'Browse'
        },
        placeholder: {
            default: 'Please choose a file'
        },
        preview: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            files: [],
        }
    },
    methods: {
        clearFile() {
            this.$refs.input.value = null
            this.files = []
            this.$emit('input', null)
        },
        deleteFile(index) {
            this.files.splice(index, 1)
            this.$refs.input.files = null
            this.$emit('input', this.files)
        },
        updateFile() {
            let x = 0;
            for (x = 0; x < this.$refs.input.files.length; x++) {
                this.$refs.input.files[x].index = x
                this.files.push(this.$refs.input.files[x])
            }
            this.$emit('input', this.files)
        }
    },
    filters: {
        sizeCalculator(value) {
            let sizes = ["Bytes", "KB", "MB", "GB", "TB"];
            if (value === 0) return "0 Byte";
            let i = parseInt(Math.floor(Math.log(value) / Math.log(1024)));
            return Math.round(value / Math.pow(1024, i), 2) + " " + sizes[i];
        },
        urlGenerator(value) {
            return URL.createObjectURL(value)
        },
        upperCase(value){
            return value.toUpperCase().split('.')[value.toUpperCase().split('.').length-1]
        }
    }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
    transition: all .4s ease;
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
    transform: translateY(30px);
    max-height: 0;
}

.fade-enter-to, .fade-leave-from {
    opacity: 1;
    transform: translateX(30px);
    max-height: 100%;
}
</style>


================================================
FILE: resources/js/Components/Form/Inputs/TInputInlineEditableRepeatable.vue
================================================
<template>
    <div class="relative">
        <!--Adding Form-->
        <div class="justify-between items-center flex  cursor-pointer text-gray-600">
            <!--Conditional View-->
            <!--Fields-->
            <div class="flex flex-col space-y-2 w-full">
                <div v-for="(item,index) in value" class="flex flex-col w-full items-center" :key="index">
                    <div class="flex flex-row items-center w-full">
                        <!--Counter-->
                        <span class="flex mr-2 font-semibold text-md text-gray-400" :class="nullError && value[index] === null && 'text-red-500'">{{ index+1 }}.</span>
                        <!--Field-->
                        <label :for="value" class="flex w-full">
                            <input v-model="value[index]" type="text" name="value" class="flex w-full rounded border border-gray-300 p-2 text-gray-500" :class="nullError && value.length === index+1 && 'border-red-500 placeholder-red-500'" :placeholder="nullError && value.length === index+1 ? 'Please fill this field' : placeHolderText" />
                        </label>
                        <!--Delete Button-->
                        <span class="col-span-1" @click="deleteItem(index)">
                            <t-trash-icon class="w-6 h-5 text-red-500 cursor-pointer"/>
                        </span>
                    </div>
                    <!--Add Button-->
                    <div class="flex flex-col w-full pl-4 pr-6 mt-2">
                        <t-button v-if="index === value.length-1" type="button" color="green" @click.native="addItem(index)" size="sm">
                            <t-plus-circle-icon class="w-6 h-5 cursor-pointer mr-2"/>
                            Add new item
                        </t-button>
                    </div>

                </div>
                <!--Placeholder-->
                <t-button
                    type="button"
                    design="light"
                    color="green"
                    v-if="value.length === 0"
                    @click.native="addItem"
                >
                    <t-plus-circle-icon class="w-6 h-5 cursor-pointer mr-2"/>
                    No items found, add new item
                </t-button>
            </div>
        </div>
    </div>
</template>

<script>
import TPlusCircleIcon from "@/Components/Icon/TPlusCircleIcon.vue";
import TTrashIcon from "@/Components/Icon/TTrashIcon.vue";
import TButton from "@/Components/Button/TButton.vue";
export default {
    props:['placeHolderText','value'],
    components: {
        TButton,
        TTrashIcon,
        TPlusCircleIcon,
    },
    data(){
      return{
          nullError:false,
      }
    },
    methods: {
        reset(){
            this.valueName =null;
            this.nullError=false;
        },
        addItem(index){
            if(this.value[index]=== null || this.value[index]=== ''){
                this.nullError = true;
            }else{

                this.value.push(null);
                this.reset();
            }

        },
        deleteItem(index){
            this.value.splice(index,1);
        }
    }
}
</script>


================================================
FILE: resources/js/Components/Form/Inputs/TInputMultiSelect.vue
================================================
<template>
    <div class="input-select" ref="selectItem">
        <!--Select Container-->
        <div
            class="select-container"
            @click="updateOptionsShowStatus"
        >

            <!--Icon-->
            <div
                v-if="hasSlot('icon')"
                class="select-input-icon"
                :class="`radius-l-${radius}`"
            >
                <slot name="icon"/>
            </div>

            <!--Select Trigger-->
            <div
                class="select-trigger"
                :class="[
                    hasSlot('icon') ? `radius-r-${radius}` : `radius-${radius}`,
                    {'input-disabled' : disabled },
                    disabled || readOnly ? 'cursor-not-allowed' : 'cursor-pointer',
                    ]"
            >

                <!--Texts-->
                <div class="select-trigger-text">

                    <transition name="fade" mode="out-in">

                        <!--Placeholder Text-->
                        <span
                            v-if="modelValue === [] || modelValue === null || modelValue.length === 0"
                            v-text="t(placeHolder)"
                            class="select-trigger-placeholder"
                        />

                        <!--Selected Option-->
                        <div
                            v-else
                            class="multi-select-selected-options-container"
                        >

                            <template
                                v-for="option in selectedOptions"
                                :key="option[optionsValueKey]"
                            >
                                <t-badge class="multi-select-selected-badge">
                                    <template #icon v-if="!readOnly && !disabled">
                                        <!--Clear Icon-->
                                        <svg
                                            @click.stop="selectOption(option)"
                                            class="multi-select-option-clear-icon"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M6 18L18 6M6 6l12 12"
                                            />
                                        </svg>
                                    </template>
                                    <!--ScopeSlot Rich Label-->
                                    <slot
                                        v-if="hasSlot('label') && !disabled"
                                        :props="option"
                                        name="label"
                                        v-html="option[optionsLabelKey]"
                                    />

                                    <!--Simple Text Label-->
                                    <span
                                        v-if="!hasSlot('label') && !disabled"
                                        v-text="option[optionsLabelKey]"
                                    />
                                </t-badge>
                            </template>

                        </div>

                    </transition>

                </div>

                <!--Icons-->
                <div class="inline-flex">

                    <!--Clear Icon-->
                    <svg
                        v-if="clearButton && selectedOptions.length>0 && !readOnly && !disabled"
                        @click.stop="clear"
                        xmlns="http://www.w3.org/2000/svg"
                        class="input-clear-icon"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                    </svg>

                    <!--Dropdown Icon-->
                    <svg
                        class="w-5 h-5 transform"
                        :class="[
                            showOptions ? 'rotate-90' : 'rotate-0',
                            'transition-size-short'
                            ]"
                        @click.stop="updateOptionsShowStatus"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M19 9l-7 7-7-7">
                        </path>
                    </svg>

                </div>

            </div>

        </div>

        <!--Options Container-->
        <transition name="fade">
            <div
                v-if="showOptions"
                class="select-options-container"
                :class="`radius-${radius}`"
            >
                <!--Options Content-->
                <div
                    class="select-options-content"
                    :class="{'max-h-56': !search}"
                >

                    <!--Search Box-->
                    <div
                        v-if="search && options.length>0"
                        class="select-search-container"
                    >
                        <t-input-text
                            v-model="searchText"
                            :placeholder="t(searchPlaceHolder)"
                            icon-type="inside"
                        >
                            <template #icon>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="h-6 w-6"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    stroke="currentColor"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                                    />
                                </svg>
                            </template>
                        </t-input-text>
                    </div>

                    <!--Options List-->
                    <template v-for="(option,index) in searchedList">
                        <div
                            v-if="search ? index<showingMaxOptions : true"
                            :key="option[optionsValueKey]"
                            :class="[
                                'select-option-item',
                                {'select-option-active-item':modelValue.includes(option[optionsValueKey])},
                                `radius-${radius}`
                                ]"
                            @click="selectOption(option)"
                        >

                            <!--ScopeSlot Rich Label-->
                            <slot
                                v-if="hasSlot('label')"
                                :props="option"
                                name="label"
                                v-html="option[optionsLabelKey]"
                            />

                            <!--Simple Text Label-->
                            <span
                                v-else
                                v-text="option[optionsLabelKey]"
                            />

                            <!--Selected Indicator Icon-->
                            <svg v-if="modelValue.includes(option[optionsValueKey])"
                                 xmlns="http://www.w3.org/2000/svg"
                                 class="select-option-active-item-icon"
                                 viewBox="0 0 20 20"
                                 fill="currentColor"
                            >
                                <path
                                    fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd"
                                />
                            </svg>

                        </div>
                    </template>

                    <!--Empty Source Message-->
                    <div
                        v-if="options.length === 0"
                        v-text="t('component.input.select.addSource')"
                    />

                </div>
                <!--Many Items Notification-->
                <div
                    v-if="searchedList.length>showingMaxOptions && search"
                    class="select-many-result"
                >
                    {{
                        t('component.input.select.manyResults', {
                            showingMaxOptions: showingMaxOptions,
                            totalOptions: searchedList.length
                        })
                    }}
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import TBadge from "@/Components/Badge/TBadge.vue";
import {onClickOutside} from "@vueuse/core";
import {defineComponent, useSlots, ref, toRefs, computed} from "vue";
import {useI18n} from "vue-i18n";

export default defineComponent({
    name: "TInputMultiSelect",
    components: {TBadge, TInputText},
    props: {
        modelValue: {
            type: [String, Date, Number, Object, Array, Boolean],
            default(){
                return []
            }
        },
        options: {
            type: [Object, Array],
            default() {
                return [];
            }
        },
        optionsLabelKey: {
            type: String,
            default: "label"
        },
        optionsValueKey: {
            type: String,
            default: "key"
        },
        placeHolder: {
            type: String,
            default: "component.input.select.select"
        },
        searchPlaceHolder: {
            type: String,
            default: "component.input.select.search"
        },
        clearButton: {
            type: Boolean,
            default: true
        },
        disabled: {
            type: Boolean,
            default: false
        },
        readOnly: {
            type: Boolean,
            default: false
        },
        search: {
            type: Boolean,
            default: false
        },
        showingMaxOptions: {
            type: Number,
            default: 10
        },
        radius: {
            type: Number,
            default: 3
        }
    },
    emits: ['update:modelValue'],
    setup(props, {emit, slots}) {
        /*Definitions*/
        const {
            modelValue,
            options,
            optionsLabelKey,
            optionsValueKey,
            disabled,
            readOnly
        } = toRefs(props);


        /*i18n*/
        const {t} = useI18n();

        /*Update Show/Hide Status of The Options List*/
        const showOptions = ref(false);
        const updateOptionsShowStatus = () => {
            if (disabled.value || readOnly.value) {
                showOptions.value = false;
            } else {
                showOptions.value = !showOptions.value;
            }
        };

        /*Outside Click Event*/
        const selectItem = ref(null);
        onClickOutside(selectItem, () => showOptions.value = false);

        /*Select Item*/
        const selectedIDs = ref([])
        const selectedOptions = computed(() => {
            if (!modelValue.value) {
                return null
            }

            let list = [];

            for (let i = 0; i < modelValue.value.length; i++) {
                if (options.value.find((item => item[optionsValueKey.value] === modelValue.value[i]))) {
                    list.push(options.value.find((item => item[optionsValueKey.value] === modelValue.value[i])))
                }
            }

            return list
        });

        const selectOption = (option) => {
            if (!selectedIDs.value.includes(option[optionsValueKey.value])) {
                /*Select the option*/
                selectedOptions.value.push(option);
                selectedIDs.value.push(option[optionsValueKey.value])
                emit('update:modelValue', selectedIDs.value)
                showOptions.value = false
            } else {
                /*Deselect the option*/
                selectedOptions.value.forEach((o, oIndex) => {
                    if (o[optionsValueKey.value] === option[optionsValueKey.value]) {
                        selectedOptions.value.splice(oIndex, 1);
                        selectedIDs.value.splice(oIndex, 1);
                        emit('update:modelValue', selectedIDs.value)
                        showOptions.value = false
                    }
                })

            }
        }

        /*Clear Option Selections*/
        const clear = () => {
            searchText.value = "";
            showOptions.value = false;
            emit("update:modelValue", []);
            selectedIDs.value = [];
        };

        /*Search Item*/
        const searchText = ref("");
        const searchedList = computed(() => {
            if (searchText.value === "") {
                return options.value;
            }

            return options.value.filter(option => option[optionsLabelKey.value].toLowerCase().replace(/[^a-zA-Z ]/g, "").includes(searchText.value.toLowerCase().replace(/[^a-zA-Z ]/g, "")));
        })

        /*Slot Check*/
        const hasSlot = name => !!useSlots()[name];

        return {
            showOptions,
            selectItem,
            selectedOptions,
            selectedIDs,
            searchText,
            searchedList,
            t,
            clear,
            hasSlot,
            selectOption,
            updateOptionsShowStatus
        }
    }
})
</script>

<style scoped>
/*Show Hide Menu Titles*/
.fade-enter-active, .fade-leave-active {
    transition: all 300ms ease-in-out;
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
}

.fade-enter-to, .fade-leave-from {
    opacity: 1;
}
</style>


================================================
FILE: resources/js/Components/Form/Inputs/TInputRadioButton.vue
================================================
<template>
    <div class="flex flex-row" @click="!disabled && updateField()">
        <div :class="[
        'flex flex-shrink-0 justify-center items-center w-5 h-5 border mr-1',
        isChecked && 'bg-'+color+'-100',
        checkboxStyle,
        radiusStyle
        ]">
            <div v-if="isChecked" :class="'text-'+color+'-500'">
                <slot v-if="$slots.hasOwnProperty('icon')" name="icon"/>
                <div v-else :class="['flex w-3 h-3',defaultSelectorStyle,radiusStyle]"></div>
            </div>
        </div>
        {{ label }}
    </div>
</template>

<script>
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
import TCheckIcon from "@/Components/Icon/TCheckIcon.vue";

export default {
    name: 'TInputRadioButton',
    components: {TCheckIcon},
    mixins: [radiusSizeMixin],
    props: {
        value: {},
        inputValue: {},
        label: String,
        color: {
            type: String,
            default: 'white'
        },
        nullable: {
            default: true
        },
        id: String,
        checked: Boolean,
        disabled: Boolean
    },
    data() {
        return {
            isChecked: this.checked
        }
    },
    computed: {
        checkboxStyle() {
            let style;
            if (this.color === 'white') {
                style = 'hover:bg-blue-100 checked:bg-indigo-200 border-gray-300 text-gray-600'
            } else if (this.color === 'black') {
                style = 'hover:bg-gray-500 checked:bg-indigo-200 border-black bg-gray-500 text-gray-100'
            } else {
                style = 'hover:bg-' + this.color + '-200 active:bg-' + this.color + '-200 border-' + this.color + '-500'
            }
            return style
        },
        defaultSelectorStyle() {
            let style;
            if (this.color === 'white') {
                style = 'bg-gray-500'
            } else if (this.color === 'black') {
                style = 'bg-gray-700'
            } else {
                style = 'bg-' + this.color + '-500'
            }
            return style
        }
    },
    methods: {
        updateField() {
            this.isChecked = !this.isChecked
            this.$emit('input', this.inputValue);
        }
    },
    watch: {
        value() {
            if (this.value !== this.inputValue) this.isChecked = false;
        }
    }
}
</script>


================================================
FILE: resources/js/Components/Form/Inputs/TInputRepeatable.vue
================================================
<template>
  <div ref="target" class="relative select-none">
    <!--Adding Form-->
    <div :class="['input border pl-2 h-10 items-center cursor-pointer hover:border-blue-500 relative', radiusStyle]"
         @click="showPanel=!showPanel">
      <!--Placeholder-->
      {{ modelValue.length === 0 ? 'No items found' : modelValue.length + ' items' }}
      <!--Items and Add Form Showing Button-->
      <t-chevron-down-icon
          :class="[
                'absolute right-2 w-5 h-5 transform duration-300',
                showPanel ? 'rotate-90' : 'rotate-0'
                ]"
      />
    </div>

    <!--Panel-->
    <div
        v-if="showPanel"
        class="absolute flex flex-col w-full border border-gray-300 py-4 px-2 rounded-md mt-2 space-y-2 bg-gradient-to-t from-gray-200 to-gray-100 shadow-inner shadow z-10">
      <!--Fields-->
      <div class="flex flex-row items-center">
        <!--Conditional View-->
        <input v-if="value1name"
               v-model="value1"
               :class="value2name == null ? 'rounded-md border' : 'md:rounded-l md:rounded-r-none md:border-r-0'" :placeholder="value1name" class="flex w-full rounded  border-gray-300 p-2" name="value1"
               type="text"/>
        <input v-if="value2name" v-model="value2" :placeholder="value2name" class="flex w-full rounded md:rounded-r md:rounded-l-none border border-gray-300 p-2"
               name="value2"
               type="text"/>
        <!--Add Button-->
        <div class="flex items-center justify-center ml-1 h-10">
          <t-button color="green" type="button" @click="addItem">
            <t-plus-circle-icon class="w-6 h-6 md:w-5 md:h-5"/>
            <span class="hidden md:block pr-2">Add</span>
          </t-button>
        </div>
      </div>
      <div v-if="emptyMessage != null" class="text-red-500 text-sm">{{ emptyMessage }}</div>
      <!--Header-->
      <div v-if="modelValue.length >0"
           class="grid grid-cols-12 w-full border-b border-gray-300 items-center space-x-2 px-2 py-1 font-bold ">
        <span class="col-span-1"></span>
        <span class="col-span-5">{{ value1name }}</span>
        <span class="col-span-5">{{ value2name }}</span>
        <span class="col-span-1"></span>
      </div>
      <!--Items-->
      <div v-for="(item,index) in modelValue" :key="index"
           class="grid grid-cols-12 bg-gray-50 border rounded-md items-center space-x-2 px-2 py-1">
        <!--Counter-->
        <span class="col-span-1">{{ index + 1 }}.</span>
        <!--Fields-->
        <span class="col-span-5">{{ item.value1 }}</span>
        <span class="col-span-5">{{ item.value2 }}</span>
        <!--Delete Button-->
        <span class="col-span-1" @click="deleteItem(index)">
                     <t-trash-icon class="w-6 h-5 text-red-500 cursor-pointer"/>
                </span>
      </div>
      <!--Close Button-->
      <t-button color="white" size="sm" type="button" @click="showPanel=false">
        Close
      </t-button>
    </div>
  </div>
</template>

<script>
/*Main Functions*/
import {ref, toRefs} from "vue";
import { onClickOutside } from "@vueuse/core";
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";

/*Components*/
import TPlusCircleIcon from "@/Components/Icon/TPlusCircleIcon.vue";
import TTrashIcon from "@/Components/Icon/TTrashIcon.vue";
import TButton from "@/Components/Button/TButton.vue";
import TChevronDownIcon from "@/Components/Icon/TChevronDownIcon.vue";

export default {
  props: {
      value1name : {
          type: String,
          default: null
      },
      value2name: {
      type: String,
      default: null
  },
      modelValue: {
          type: [Object, Array],
          default: null
      }

},
  components: {
    TChevronDownIcon,
      TButton,
    TTrashIcon,
    TPlusCircleIcon,
  },

  mixins: [radiusSizeMixin],

    emits: ['update:modelValue'],

    setup(props, {emit}){
      const { value2name, modelValue} = toRefs(props)
      const value1 = ref();
      const value2 = ref();
      const showPanel = ref();
      const emptyMessage = ref();

      /*Show-hide Panel*/
      const target = ref();
        onClickOutside(target, () => showPanel.value = false);

        /*Reset*/
        const reset = ()=>{
            value1.value = null;
            value2.value = null;
            emptyMessage.value = null;
        }

        const addItem = () => {
            if (value2name.value != null) {
                if (value1.value == null || value2.value == null) {
                    emptyMessage.value = 'Please fill in the fields';
                    window.setTimeout(() => {
                        emptyMessage.value = null;
                    }, 3000);
                } else {
                    let newValue = [...modelValue.value]
                    newValue.push({value1: value1.value, value2: value2.value});
                    emit('update:modelValue', newValue);
                    reset();
                }
            } else {
                if (value1.value == null) {
                    emptyMessage.value = 'Please fill in the fields';
                    window.setTimeout(() => {
                        emptyMessage.value = null;
                    }, 3000);
                } else {
                    let newValue = [...modelValue.value]
                    newValue.push({value1: value1.value});
                    emit('update:modelValue', newValue);
                    reset();
                }
            }
        }

        const deleteItem = (index) => {
          modelValue.value.splice(index,1)
        }

        return{
            value1,
            value2,
            showPanel,
            emptyMessage,
            target,
            addItem,
            deleteItem,
            reset
        }
    },
}
</script>


================================================
FILE: resources/js/Components/Form/Inputs/TInputSelect.vue
================================================
<template>
  <div
      class="input-select"
      ref="selectItem"
      :class="[errors.length>0 ? `border border-red-500 radius-${radius}`: '']"
  >
    <!--Select Container-->
    <div
        class="select-container"
        @click="updateOptionsShowStatus"
    >

      <!--Icon-->
      <div
          v-if="hasSlot('icon')"
          class="select-input-icon"
          :class="`radius-l-${radius}`"
      >
        <slot name="icon"/>
      </div>

      <!--Select Trigger-->
      <div
          class="select-trigger"
          :class="[
                    hasSlot('icon') ? `radius-r-${radius}` : `radius-${radius}`,
                    {'input-disabled' : disabled },
                    disabled || readOnly ? 'cursor-not-allowed' : 'cursor-pointer',
                    ]"
      >

        <!--Texts-->
        <div class="select-trigger-text">

          <transition name="fade" mode="out-in">

            <!--Placeholder Text-->
      <span
        v-if="modelValue === null || modelValue === undefined"
        v-text="t(placeHolder)"
        class="select-trigger-placeholder"
      />

            <!--Selected Option-->
            <div v-else>

              <!--ScopeSlot Rich Label-->
              <slot
                  v-if="hasSlot('label') && !disabled"
                  :props="selectedOption"
                  name="label"
                  v-html="selectedOption[optionsLabelKey]"
              />

              <!--Simple Text Label-->
              <span
                  v-if="!hasSlot('label') && !disabled"
                  v-text="selectedOption[optionsLabelKey]"
              />

            </div>

          </transition>
        </div>

        <!--Icons-->
        <div class="inline-flex">

          <!--Clear Icon-->
          <svg
              v-if="clearButton && selectedOption && !readOnly && !disabled"
              @click.stop="clear"
              xmlns="http://www.w3.org/2000/svg"
              class="input-clear-icon"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
          >
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>

          <!--Dropdown Icon-->
          <svg
              class="w-5 h-5 transform"
              :class="[
                            showOptions ? 'rotate-90' : 'rotate-0',
                            'transition-size-short'
                            ]"
              @click.stop="updateOptionsShowStatus"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7">
            </path>
          </svg>

        </div>
      </div>

    </div>

    <!--Options Container-->
    <transition name="fade">
      <div
          v-if="showOptions"
          class="select-options-container"
          :class="`radius-${radius}`"
      >
        <!--Options Content-->
        <div
            class="select-options-content"
            :class="{'max-h-56': !search}"
        >

          <!--Search Box-->
          <div
              v-if="search && options.length>0"
              class="select-search-container"
          >
            <t-input-text
                v-model="searchText"
                :placeholder="t(searchPlaceHolder)"
                icon-type="inside"
                class="border-none"
            >
              <template #icon>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                >
                  <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                  />
                </svg>
              </template>
            </t-input-text>
          </div>

          <!--Options List-->
          <template v-for="(option,index) in searchedList">
            <div
                v-if="search ? index<showingMaxOptions : true"
                :key="option[optionsValueKey]"
                :class="[
                                'select-option-item',
                                {'select-option-active-item':modelValue === option[optionsValueKey]},
                                `radius-${radius}`
                                ]"
                @click="selectOption(option[optionsValueKey])"
            >

              <!--ScopeSlot Rich Label-->
              <slot
                  v-if="hasSlot('label')"
                  :props="option"
                  name="label"
                  v-html="option[optionsLabelKey]"
              />

              <!--Simple Text Label-->
              <span
                  v-else
                  v-text="option[optionsLabelKey]"
              />

              <!--Selected Indicator Icon-->
              <svg v-if="modelValue === option[optionsValueKey]"
                   xmlns="http://www.w3.org/2000/svg"
                   class="select-option-active-item-icon"
                   viewBox="0 0 20 20"
                   fill="currentColor"
              >
                <path
                    fill-rule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                    clip-rule="evenodd"
                />
              </svg>

            </div>
          </template>

          <!--Empty Source Message-->
      <div
        v-if="options.length === 0"
        v-text="t('component.input.select.addSource')"
      />

        </div>

        <!--Many Items Notification-->
        <div
            v-if="searchedList.length>showingMaxOptions && search"
            class="select-many-result"
            v-text="t('component.input.select.manyResults', { showingMaxOptions: showingMaxOptions, totalOptions: searchedList.length })"
        ></div>
      </div>
    </transition>
  </div>
</template>

<script>
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import {onClickOutside} from "@vueuse/core";
import {ref, toRefs, computed, inject, useSlots} from "vue";
import {useI18n} from "vue-i18n";

export default {
  name: "TInputSelect",
  components: {TInputText},
  props: {
    modelValue: {
      type: [String, Date, Number, Object, Array, Boolean],
      default: null
    },
    options: {
      type: [Object, Array],
      default() {
        return [];
      }
    },
    optionsLabelKey: {
      type: String,
      default: "label"
    },
    optionsValueKey: {
      type: String,
      default: "key"
    },
    placeHolder: {
      type: String,
      default: "component.input.select.select"
    },
    searchPlaceHolder: {
      type: String,
      default: "component.input.select.search"
    },
    clearButton: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    search: {
      type: Boolean,
      default: false
    },
    showingMaxOptions: {
      type: Number,
      default: 10
    },
    radius: {
      type: Number,
      default: 3
    }
  },
  emits: ['update:modelValue'],
  setup(props, {emit, slots}) {
    /*Definitions*/
    const {
      modelValue,
      options,
      optionsLabelKey,
      optionsValueKey,
      disabled,
      readOnly
    } = toRefs(props);

    /*i18n*/
    const {t} = useI18n();

    /*Get Error Status*/
    const errors = inject('errors', []);

    /*Update Show/Hide Status of The Options List*/
    const showOptions = ref(false);
    const updateOptionsShowStatus = () => {
      if (disabled.value || readOnly.value) {
        showOptions.value = false;
      } else {
        showOptions.value = !showOptions.value;
      }
    };

    /*Outside Click Event*/
    const selectItem = ref(null);
    onClickOutside(selectItem, () => showOptions.value = false);

    /*Select Option*/
    const selectOption = (value) => {
      emit("update:modelValue", value);
      showOptions.value = false;
    };

    /*Clear Option Selection*/
    const clear = () => {
      showOptions.value = false;
      emit("update:modelValue", null);
      searchText.value = "";
    };

    /*Selected Item*/
    const selectedOption = computed(() => {
      if (modelValue.value === null || modelValue.value === '' || modelValue.value === undefined) {
        return null;
      }
      return options.value.find(option => option[optionsValueKey.value] === modelValue.value);
    });

    /*Search Item*/
    const searchText = ref("");
    const searchedList = computed(() => {
      if (searchText.value === "") {
        return options.value;
      }

      return options.value.filter(option => option[optionsLabelKey.value].toLowerCase().replace(/[^a-zA-Z ]/g, "").includes(searchText.value.toLowerCase().replace(/[^a-zA-Z ]/g, "")));
    })

    /*Slot Check*/
    const hasSlot = name => !!useSlots()[name];

    return {
      selectItem,
      showOptions,
      selectedOption,
      searchedList,
      t,
      searchText,
      errors,
      selectOption,
      updateOptionsShowStatus,
      hasSlot,
      clear
    };
  }
};
</script>

<style scoped>
/*Show Hide Menu Titles*/
.fade-enter-active, .fade-leave-active {
  transition: all 300ms ease-in-out;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.fade-enter-to, .fade-leave-from {
  opacity: 1;
}
</style>


================================================
FILE: resources/js/Components/Form/Inputs/TInputText.vue
================================================
<template>
  <!--Container-->
  <div
      class="text-input"
      ref="withSelectInput"
      :class="[errors.length>0 ? `border border-red-500 radius-${radius}`: '']"
  >
    <!--Outside Icon-->
    <div
        v-if="hasSlot('icon') && iconType==='outside'"
        class="text-input-outside-icon"
        :class="`radius-l-${radius}`"
    >
      <slot name="icon"/>
    </div>
    <!--Prepend-->
    <div
        v-if="prepend || hasSlot('prepend')"
        class="text-input-prepend"
        :class="[
                selectPosition==='left' && options[0][optionsValueKey] ? 'border-r' : '',
                hasSlot('icon') && iconType==='outside' ? '' : `border-l radius-l-${radius}`
                ]"
    >
      <span v-if="prepend" v-text="prepend"/>
      <slot v-else name="prepend"></slot>
    </div>
    <!--Left Select-->
    <div
        v-if="options[0][optionsValueKey] && selectPosition==='left'"
        @click="disabled || readOnly==='select' || readOnly==='both' ? '' : showSelectList = !showSelectList"
        class="text-input-select-container"
    >
      <!--Select Trigger-->
      <div
          class="text-input-select-trigger"
          :class="[
                    hasSlot('prepend') || prepend ? '' : `border-l radius-l-${radius}`,
                    disabled || readOnly==='select' || readOnly==='both' ? 'cursor-not-allowed' : 'cursor-pointer',
                    {'input-disabled' : disabled}
                    ]"
      >
        <!--Clear Icon-->
        <svg
            @click.stop="$emit('update:selectValue', null)"
            v-if="selectValue && !disabled && readOnly!=='select' && readOnly!=='both'"
            xmlns="http://www.w3.org/2000/svg"
            class="input-clear-icon"
            :class="selectPosition==='left' ? 'mr-1' : ''"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
        >
          <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
        <!--Selected Item-->
        <span
            v-if="selectValue && selectType==='inside'"
            v-text="options.find(o=>o[optionsValueKey] === selectValue)[optionsLabelKey]"
        />
        <!--Dropdown Icon-->
        <svg
            class="w-5 h-5 transform"
            :class="[
            !showSelectList ? 'rotate-0' : '',
            (showSelectList && selectPosition==='left' && selectType !== 'inside') ? '-rotate-90' : '',
            (showSelectList && selectPosition==='right') || (showSelectList &&selectType === 'inside') ? 'rotate-90' : '',
            'transition-size-short'
            ]"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24" stroke="currentColor"
        >
          <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M19 9l-7 7-7-7"
          />
        </svg>
        <!--Selected Icon-->
        <div
            v-if="selectType==='outside'"
            class="text-input-selected-indicator"
            :class="selectValue ? 'bg-green-500' : 'bg-gray-500 dark:bg-gray-700'"
        />
      </div>
      <!--Select List-->
      <div v-if="showSelectList"
           class="text-input-select-list-container"
           :class="[
                     `radius-${radius}`,
                     selectPosition==='left' ? 'left-0' : 'right-0'
                     ]"
      >
        <template v-for="item in options">
          <div
              @click.stop="showSelectList = false; $emit('update:selectValue', item[optionsValueKey])"
              class="text-input-select-list-item"
          >
            <span v-text="item[optionsLabelKey]"/>
            <svg
                v-if="item[optionsValueKey] === selectValue"
                xmlns="http://www.w3.org/2000/svg"
                class="text-input-select-list-selected-icon"
                viewBox="0 0 20 20"
                fill="currentColor"
            >
              <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                  clip-rule="evenodd"
              />
            </svg>
          </div>
        </template>
      </div>

    </div>
    <!--Input-->
    <div class="flex flex-grow">
      <!--Inside Icon-->
      <div
          v-if="hasSlot('icon') && iconType==='inside'"
          class="text-input-inside-icon"
      >
        <slot name="icon"/>
      </div>
      <!--Input Field-->
      <input
          class="input text-input"
          :class="[
                    inputStyle,
                    {'pl-10':iconType === 'inside'},
                    {'input-disabled' : disabled}
                    ]"
          :type="type"
          :id="id"
          :placeholder="placeholder"
          :value="disabled ? '' : modelValue"
          :disabled="disabled || readOnly==='text' || readOnly==='both'"
          @input="$emit('update:modelValue', $event.target.value)"
          ref="input"
      >
    </div>
    <!--Right Select-->
    <div
        v-if="options[0][optionsValueKey] && selectPosition==='right'"
        @click="disabled || readOnly==='select' || readOnly==='both' ? '' : showSelectList = !showSelectList"
        class="text-input-select-container"
    >
      <!--Select Trigger-->
      <div
          class="text-input-select-trigger"
          :class="[
                    hasSlot('append') || append ? '' : `border-r radius-r-${radius}`,
                    disabled || readOnly==='select' || readOnly==='both' ? 'cursor-not-allowed' : 'cursor-pointer',
                    {'input-disabled' : disabled}
                    ]"
      >
        <!--Clear Icon-->
        <svg
            @click.stop="$emit('update:selectValue', null)"
            v-if="selectValue && !disabled && readOnly!=='select' && readOnly!=='both'"
            xmlns="http://www.w3.org/2000/svg"
            class="input-clear-icon"
            :class="selectPosition==='right' ? 'ml-1' : ''"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
        >
          <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
        <!--Selected Item-->
        <span
            v-if="selectValue && selectType==='inside'"
            v-text="options.find(o=>o[optionsValueKey] === selectValue)[optionsLabelKey]"
        />
        <!--Dropdown Icon-->
        <svg
            class="w-5 h-5 transform"
            :class="[
                        !showSelectList ? 'rotate-0' : '',
                        (showSelectList && selectPosition==='left' && selectType !== 'inside') ? '-rotate-90' : '',
                        (showSelectList && selectPosition==='right') || (showSelectList &&selectType === 'inside') ? 'rotate-90' : '',
                        'transition-size-short'
                        ]"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24" stroke="currentColor"
        >
          <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M19 9l-7 7-7-7"
          />
        </svg>
        <!--Selected Icon-->
        <div
            v-if="selectType==='outside'"
            class="text-input-selected-indicator"
            :class="selectValue ? 'bg-green-500' : 'bg-gray-500 dark:bg-gray-700'"
        />
      </div>
      <!--Select List-->
      <div v-if="showSelectList"
           class="text-input-select-list-container"
           :class="[
                     `radius-${radius}`,
                     selectPosition==='left' ? 'left-0' : 'right-0'
                     ]"
      >
        <template v-for="item in options">
          <div
              @click.stop="showSelectList = false; $emit('update:selectValue', item[optionsValueKey])"
              class="text-input-select-list-item"
          >
            <span v-text="item[optionsLabelKey]"/>
            <svg
                v-if="item[optionsValueKey] === selectValue"
                xmlns="http://www.w3.org/2000/svg"
                class="text-input-select-list-selected-icon"
                viewBox="0 0 20 20"
                fill="currentColor"
            >
              <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                  clip-rule="evenodd"
              />
            </svg>
          </div>
        </template>
      </div>
    </div>
    <!--Append-->
    <div
        v-if="append || hasSlot('append')"
        class="text-input-append"
        :class="[
        `radius-r-${radius}`,
        selectPosition==='right' && options[0][optionsValueKey] ? 'border-l' : ``
        ]"
    >
      <span v-if="append" v-text="append"/>
      <slot v-else name="append"></slot>
    </div>
  </div>
</template>

<script>
import {computed, defineComponent, inject, useSlots, ref, toRefs} from "vue";
import {onClickOutside} from "@vueuse/core";

export default defineComponent({
  name: "TInputText",
  props: {
    selectValue: {
      type: [String, Date, Number, Object, Array],
      default: null
    },
    modelValue: {
      type: [String, Date, Number, Object, Array],
      default: null
    },
    id: {
      type: String,
      default() {
        return "text-input-" + Number(new Date());
      }
    },
    placeholder: {
      type: String,
      default: ""
    },
    prepend: {
      type: String,
      default: ""
    },
    append: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "text"
    },
    selectType: {
      type: String,
      default: "outside"
    },
    selectPosition: {
      type: String,
      default: ""
    },
    iconType: {
      type: String,
      default: "outside"
    },
    options: {
      type: [Object, Array],
      default() {
        return [
          {key: "", label: "Please add a options source"}
        ];
      }
    },
    optionsLabelKey: {
      type: String,
      default: "label"
    },
    optionsValueKey: {
      type: String,
      default: "key"
    },
    radius: {
      type: Number,
      default: 3
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readOnly: {
      type: String,
      default: ''
    },
    clearButton: {
      type: Boolean,
      default: false
    }
  },
  emits: ["update:modelValue", "update:selectValue"],
  setup(props, {slots}) {
    /*Definitions*/
    const {radius, prepend, append, iconType, options, optionsValueKey, selectPosition} = toRefs(props);
    const input = ref(null);
    const withSelectInput = ref(null);
    const showSelectList = ref(false);

    /*Get Error Status*/
    const errors = inject('errors', []);

    /*Outside click for select*/
    onClickOutside(withSelectInput, () => showSelectList.value = false);

    /*Focus Action*/
    const focus = () => {
      input.value.focus();
    };

    /*Generating Style Classes*/
    const inputStyle = computed(() => {
      let radiusStyle;
      let leftSideHasItem, rightSideHasItem;

      /*Check Left Side Has Item*/
      if (prepend.value || hasSlot("prepend") || selectPosition.value === "left" || (hasSlot('icon') && iconType.value === 'outside')) {
        leftSideHasItem = true
      }

      /*Check Right Side Has Item*/
      if (append.value || hasSlot("append") || selectPosition.value === "right") {
        rightSideHasItem = true
      }

      /*Left Full and Right Empty*/
      if (leftSideHasItem && !rightSideHasItem) {
        radiusStyle = "radius-r-" + radius.value;
      }

      /*Left Empty Right Full*/
      if (!leftSideHasItem && rightSideHasItem) {
        radiusStyle = "radius-l-" + radius.value;
      }

      /*Both Empty*/
      if (!leftSideHasItem && !rightSideHasItem) {
        radiusStyle = "radius-" + radius.value;
      }

      return radiusStyle;
    });

    /*Slot Check*/
    const hasSlot = name => !!useSlots()[name];

    return {input, withSelectInput, inputStyle, showSelectList, errors, focus, hasSlot};
  }
});
</script>


================================================
FILE: resources/js/Components/Form/Inputs/TInputTextArea.vue
================================================
<template>
  <div
      class="relative"
      :class="[errors.length>0 ? `border border-red-500 radius-${radius}`: '']"
  >
    <t-x-circle-icon
        v-if="clearButton && modelValue"
        @click.native="$emit('update:modelValue', null)"
        class="absolute rounded-full -top-3 -right-3 w-6 h-6 bg-white hover:bg-red-500 text-red-500 hover:text-white cursor-pointer"
    />
    <textarea
        :class="[
            'input h-auto w-full',
            `radius-${radius}`,
            {'input-disabled cursor-not-allowed' : disabled || readOnly }
            ]"
        :rows="rows"
        :id="id"
        :placeholder="placeholder"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
        ref="input"
        :disabled="disabled"
    />
    <span
        class="absolute bg-white bg-opacity-70 bottom-3 right-2 float-right text-xs border px-1 py-0.5 rounded-full min-w-[1.5rem] text-center bg-white-500"
        v-show="counter && modelValue">
      {{ textLength }}
    </span>
  </div>
</template>

<script>
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
import TXCircleIcon from "@/Components/Icon/TXCircleIcon.vue";
import {toRefs, watch, inject, ref} from "vue";

export default {
  name: "TInputTextArea",
  components: {TXCircleIcon},
  mixins: [radiusSizeMixin],
  props: {
    modelValue: {
      type: String
    },
    id: {
      type: String
    },
    rows: {
      type: Number,
      default: 3
    },
    placeholder: {
      type: String
    },
    clearButton: {
      type: Boolean,
      default: false
    },
    counter: {
      type: Boolean,
      default: false
    },
    disabled: {
      default: false
    },
    readOnly: {
      default: false
    }
  },
  setup(props) {
    /*Definitions*/
    const {modelValue} = toRefs(props);

    /*Watch Text Length*/
    const textLength = ref();
    watch(modelValue, () => {
      if (modelValue.value) {
        textLength.value = modelValue.value.length
      }
    })

    /*Get Error Status*/
    const errors = inject('errors', []);

    return {errors, textLength}
  }
}
</script>


================================================
FILE: resources/js/Components/Form/TError.vue
================================================
<template>
    <div v-show="message">
        <p class="text-sm text-red-600">
            {{ message }}
        </p>
    </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    props: ['message']
})
</script>


================================================
FILE: resources/js/Components/Form/TFormContent.vue
================================================
<template>
    <div class="w-full">
        <form :enctype="enctype" @submit.prevent="$emit('submitted')">
            <!--Form Body-->
            <t-content-card :radius="temporaryRadius">
                <div class="flex flex-col w-full space-y-4">
                    <slot></slot>
                    <!--Form Buttons Container-->
                    <transition duration="500" name="status">
                        <div
                            v-if="submitButton || resetButton || $slots.status || $slots.button + '-area'"
                            class="flex flex-wrap col-span-12 justify-center md:justify-end space-x-2"
                            :class="[
                                { 'mr-2 py-2': sectionLayout === 'native' },
                                { 'border-t pt-2 mt-2 -mb-2': sectionLayout === 'smart' }
                            ]"
                        >
                            <!--Extra Form Buttons Area-->
                            <slot name="button-area" />
                            <!--Status Area-->
                            <slot v-if="$slots.status" name="status" />
                            <!--Default Form Buttons-->
                            <div
                                v-else
                                class="flex flex-wrap w-full justify-center md:justify-end items-center space-x-2"
                            >
                                <!--Reset Button-->
                                <t-button
                                    v-if="resetButton"
                                    :radius="temporaryRadius"
                                    design="filled"
                                    color="yellow"
                                    type="button"
                                    @click="reset"
                                >{{ tm('reset') }}</t-button>
                                <!--Save Button-->
                                <t-button
                                    v-if="submitButton"
                                    :disabled="disabled"
                                    :radius="temporaryRadius"
                                    design="filled"
                                    color="green"
                                    icon="plus"
                                    type="submit"
                                >{{ tm('save') }}</t-button>
                            </div>
                        </div>
                    </transition>
                </div>
            </t-content-card>
        </form>
    </div>
</template>

<script>
/* Main functions */
import { defineComponent, inject, toRefs, ref, provide, useSlots } from "vue";

/* Components */
import TButton from "@/Components/Button/TButton.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";

/*Sources*/
import { formContentConf } from "@/config";

/* Multi language */
import { useI18n } from "vue-i18n";

export default defineComponent({
    name: "TForm",
    props: {
        enctype: {
            type: String,
            default: 'application/x-www-form-urlencoded'
        },
        disabled: Boolean,
        radius: {
            type: Number,
            default: null
        },
        resetButton: {
            type: Boolean,
            default: true
        },
        submitButton: {
            type: Boolean,
            default: true
        },
        sectionLayout: {
            type: String,
            default: 'native'
        },
    },
    components: {
        TContentCard,
        TButton
    },
    emits: ["reset"],

    setup(props, { emit, slots }) {
        /*Definitions*/
        const { radius, sectionLayout } = toRefs(props)
        const appConf = inject("appConf");
        provide('formContentConf', (formContentConf));
        provide('sectionLayout', (sectionLayout));

        /*Temporary Definations*/
        const temporaryRadius = ref(radius.value ? radius.value : formContentConf.radius ? formContentConf.radius : appConf.value.radius)

        /* Multi-language */
        const { tm } = useI18n({
            inheritLocale: true,
        });

        /*Reset*/
        const reset = () => {
            emit("reset");
        };

        /*Slot Check*/
        const hasSlot = name => !!useSlots()[name];
        return {
            appConf,
            formContentConf,
            temporaryRadius,
            tm,
            hasSlot,
            reset
        };
    }
});
</script>


<style>
/*Status Change Effect*/
.status-enter-active,
.status-leave-active {
    transition: all 1s;
}

.status-enter,
.status-leave-to {
    opacity: 0;
}

.status-enter-to,
.status-leave {
    opacity: 1;
}
</style>


================================================
FILE: resources/js/Components/Form/TFormSection.vue
================================================
<template>
    <div
        class="text-slate-700 dark:text-gray-100"
        :class="[
            { 'md:grid md:grid-cols-3 md:gap-6': sectionLayout === 'native' },
            { '-mx-6': sectionLayout === 'smart' },
        ]"
    >
        <!--Section Header-->
        <div v-if="sectionLayout === 'native'" class="md:col-span-1">
            <div class="px-4">
                <!--Title-->
                <h3 v-if="title" class="text-lg font-medium">{{ title }}</h3>
                <!--Description-->
                <p v-if="description" class="mt-1 text-sm">{{ description }}</p>
            </div>
        </div>
        <!--Section Content-->
        <div
            :class="[
                { 'mt-5 md:mt-0 md:col-span-2 border shadow m-2': sectionLayout === 'native' },
                { '': sectionLayout === 'smart' },
                `radius-${temporaryRadius}`
            ]"
        >
            <div
                class="px-6"
                :class="[
                    { 'py-4': sectionLayout === 'native' }
                ]"
            >
                <!-- Compact Header -->
                <div v-if="sectionLayout === 'smart'" class="mb-4 pb-1 border-b">
                    <!--Title-->
                    <h3 v-if="title" class="text-md font-medium">{{ title }}</h3>
                    <!--Description-->
                    <p v-if="description" class="mt-1 text-xs">{{ description }}</p>
                </div>
                <div class="grid grid-cols-12 gap-2">
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
/* Main Functions */
import { defineComponent, inject, toRefs, ref } from 'vue'

export default defineComponent({
    name: "TFormSection",
    props: {
        title: {
            type: String,
            default: ''
        },
        description: {
            type: String,
            default: ''
        },
        radius: {
            type: Number,
            default: null
        },
    },

    emits: ['reset'],

    setup(props, { emit }) {
        /* Definitions */
        const { radius } = toRefs(props);
        const formContentConf = inject('formContentConf');
        const appConf = inject("appConf");
        const sectionLayout = inject("sectionLayout");

        /*Temporary Definations*/
        const temporaryRadius = ref(radius.value ? radius.value : formContentConf.radius ? formContentConf.radius : appConf.value.radius)

        const reset = () => {
            emit('reset')
        }

        return {
            reset,
            temporaryRadius,
            sectionLayout
        }
    }
})
</script>


================================================
FILE: resources/js/Components/Form/TInputGroup.vue
================================================
<template>
    <div
        class="flex flex-col"
        :class="[
            phoneWidth ? `grid-${phoneWidth}` : '',
            tabletWidth ? `grid-md-${tabletWidth}` : '',
            laptopWidth ? `grid-lg-${laptopWidth}` : '',
            desktopWidth ? `grid-xl-${desktopWidth}` : '',
        ]"
    >
        <!--Label-->
        <label
            :for="labelFor"
            class="flex flex-row gap-1 items-center font-medium text-sm whitespace-normal dark:text-gray-200"
        >
            <!--Label-->
            <span v-if="label">{{ label }}</span>
            <!--Label Prop-->
            <span v-if="!label && $slots.label" class="inline-flex items-center">
                <!--Label Slot-->
                <slot name="label" />
            </span>
            <!--Sub Label-->
            <span
                v-if="subLabel"
                :class="['text-xs italic', subLabelColors[subLabelColor]]"
            >{{ subLabel }}</span>
        </label>
        <!--Input Content-->
        <slot></slot>
        <!--Front End Error-->
        <div v-if="errors.length > 0">
            <template v-for="error in errors" :key="error.$uid">
                <p class="text-sm text-red-600 mt-2 whitespace-nowrap">{{ error.$message }}</p>
            </template>
        </div>

        <!--Backend Error-->
        <div v-else>
            <p
                class="text-sm text-red-600 mt-2 whitespace-nowrap"
            >{{ $page.props.errors[labelFor] }}</p>
        </div>
    </div>
</template>

<script>
import { defineComponent, provide, toRefs } from 'vue'
import { inputGroupStyleMixin } from "@/Mixins/Styles/inputGroupStyleMixin";

export default defineComponent({
    props: {
        label: {
            type: String,
            default: null
        },
        subLabel: {
            type: String,
            default: null
        },
        subLabelColor: {
            type: String,
            default: 'yellow'
        },
        labelFor: {
            type: String,
            default: null
        },
        errors: {
            type: Array,
            default() {
                return []
            }
        },
        phoneWidth: {
            type: Number,
            default: 12
        },
        tabletWidth: {
            type: Number,
            default: null
        },
        laptopWidth: {
            type: Number,
            default: 6
        },
        desktopWidth: {
            type: Number,
            default: null
        }
    },
    mixins: [inputGroupStyleMixin],
    setup(props) {
        /*Error Status Provide to Input Component*/
        const { errors } = toRefs(props);
        provide('errors', errors);
    }
})
</script>


================================================
FILE: resources/js/Components/Icon/TAdjustmentsIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TAdjustmentsIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TAudioIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TAudioIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TBanIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TBanIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TBellIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TBellIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TCalendarIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TCalendarIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TCashIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TCashIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TCheckCircleIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TCheckCircleIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TCheckCircleSolidIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TCheckCircleSolidIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TCheckIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TCheckIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TChevronDoubleDownIcon.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13l-7 7-7-7m14-8l-7 7-7-7" />
  </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: "TChevronDoubleDownIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TChevronDownIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'TChevronDownIcon'
})
</script>


================================================
FILE: resources/js/Components/Icon/TChevronLeftIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'TChevronLeftIcon'
})
</script>


================================================
FILE: resources/js/Components/Icon/TChevronRightIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'TChevronRightIcon'
})
</script>


================================================
FILE: resources/js/Components/Icon/TChevronUpIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'TChevronUpIcon'
})
</script>


================================================
FILE: resources/js/Components/Icon/TClockIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TClockIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TCogIcon.vue
================================================
<template>
  <svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
        stroke-linecap="round" stroke-linejoin="round"
        stroke-width="2"/>
    <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round"
          stroke-width="2"/>
  </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: "TCogIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TCollectionIcon.vue
================================================
<template>
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" stroke-linecap="round" stroke-linejoin="round"
              stroke-width="2"/>
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TCollectionIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TDocumentIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TDocumentIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TDotsVerticalIcon.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
  </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: "TDotsVerticalIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TEyeIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TEyeIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TGitHubIcon.vue
================================================
<template>
    <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" role="img" viewBox="0 0 496 512">
        <path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TGitHubIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/THamburgerMenuTriggerIcon.vue
================================================
<template>
  <svg
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
  >
    <path
        d="M4 6h16M4 12h16M4 18h16"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
    />
  </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: "THamburgerMenuTriggerIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TInformationCircleIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TInformationCircleIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TInformationIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TInformationIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TLogOutIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TLogOutIcon"
})
</script>



================================================
FILE: resources/js/Components/Icon/TLogo.vue
================================================
<template>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
    >
        <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"
        />
        <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"
        />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TLogo"
})
</script>


================================================
FILE: resources/js/Components/Icon/TPaperClipIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TPaperClipIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TPencilAltIcon.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
  </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: "TPencilAltIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TPlusCircleIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TPlusCircleIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TPlusIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TPlusIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TRefreshIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TRefreshIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TSearchCircleIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16l2.879-2.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TSearchCircleIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TSearchIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TSearchIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TShieldCheckIcon.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
  </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: "TShieldCheckIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TShieldCheckSolidIcon.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
    <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
  </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: "TShieldCheckSolidIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TShoppingBagIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TShoppingBagIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TStarIcon.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
  </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: "TStarIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TStarSolidIcon.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
  </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: "TStarSolidIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TTrashIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TTrashIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TUserCircleIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TUserCircleIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TUserGroupIcon.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
  </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: "TUserGroupIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TVideoIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TVideoIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TXCircleIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TXCircleIcon"
})
</script>


================================================
FILE: resources/js/Components/Icon/TXIcon.vue
================================================
<template>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: "TXIcon"
})
</script>


================================================
FILE: resources/js/Components/List/TList.vue
================================================
<template>
  <div :class="tStyle">
    <slot />
  </div>
</template>

<script>
import { computed, defineComponent, provide, ref, toRefs } from "vue";

export default defineComponent({
  name: "TList",
  props: {
    color: {
      type: String,
      default: "white"
    },
    design: {
      type: String,
      default: "filled"
    },
    radius: {
      type: Number,
      default: 3
    },
    separated: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    /*Definitions*/
    const { color, design, radius, separated, border } = toRefs(props);

    /*Provide*/
    provide("separated", ref(separated));
    provide("radius", ref(radius));
    provide("border", ref(border));
    provide("rootColor", ref(color));
    provide("rootDesign", ref(design));

    /*Generating Style Classes*/
    const tStyle = computed(() => {
      return "list" + " " +
        (separated.value ? "space-y-2" : "");
    });

    return { tStyle };
  }
});
</script>


================================================
FILE: resources/js/Components/List/TListItem.vue
================================================
<template>
  <div :class="tStyle">
    <!--Icon-->
    <div v-if="hasSlot('icon')">
      <slot name="icon"></slot>
    </div>
    <!--Title-->
    <div v-if="hasSlot('title')">
      <b>
        <slot name="title"></slot>
      </b>
    </div>
    <!--Default Content-->
    <div class="list-content">
      <slot></slot>
    </div>
    <!--Second Content-->
    <div v-if="hasSlot('secondContent')">
      <slot name="secondContent"></slot>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, inject, toRefs, useSlots } from "vue";

export default defineComponent({
  name: "TListItem",
  props: {
    active: {
      type: Boolean,
      required: false
    },
    design: {
      type: String,
      default: "filled"
    },
    color: {
      type: String,
      default: null,
      request: false
    }
  },
  setup(props, { slots }) {
    /*Definitions*/
    const { active, design, color} = toRefs(props);

    /*Injections*/
    const radius = inject("radius");
    const border = inject("border");
    const separated = inject("separated");
    const rootColor = inject("rootColor");
    const rootDesign = inject("rootDesign");

    /*Taken Over Definitions from Root */
    const activeColor = computed(() => {
      return rootColor.value ? rootColor.value : color.value;
    });
    const activeDesign = computed(() => {
      return rootDesign.value ? rootDesign.value : design.value;
    });

    /*Generating Style Classes*/
    const tStyle = computed(() => {
      return "list-container" + " " +
        "list-" + activeDesign.value + "-base" + " " +
        "list-" + activeDesign.value + "-" + activeColor.value + (active.value ? "-active" : "") + " " +
        (separated.value && border ? "border last:border first:border" : "") + " " +
        (separated.value ? "radius-" + radius.value : "group-radius-" + radius.value) + " " +
        (activeDesign.value === "outline" || activeDesign.value === "elegant" ? "list-border" : (border.value ? "list-border" : "border-none")) + " " +
        (hasSlot("secondContent") ? "justify-between" : "justify-start");
    });

    /*Slot Check*/
    const hasSlot = name => !!useSlots()[name];

    return { hasSlot, tStyle };
  }
});
</script>


================================================
FILE: resources/js/Components/Loading/Animations/TLoadingAnimationCogs.vue
================================================
<template>
    <div class="loading-cogs-container">
        <!--Cog1-->
        <div id="cog1">
            <svg
                :class="tStyle['cog1']"
                style="background-color: rgba(0,0,0,0)"
                aria-hidden="true"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
            >
                <path
                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                />
                <path
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                />
            </svg>
        </div>
        <!--Cog2-->
        <div id="cog2" class="loading-cogs-second">
            <svg
                :class="tStyle['cog2']"
                style="background-color: rgba(0,0,0,0)"
                aria-hidden="true"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
            >
                <path
                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                />
                <path
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                />
            </svg>
        </div>
    </div>
</template>

<script>
import { computed, defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
    name: "TLoadingAnimationCogs",
    props: {
        color: {
            type: String,
            default: "gray"
        },
        target: {
            type: String,
            default: "button"
        }
    },
    setup(props) {
        const { color, target } = toRefs(props);
        /*Design Check*/
        const tStyle = reactive({})
        tStyle['cog1'] = computed(() => {
            return "loading-" + color.value + ' ' +
                (target.value === "button" ? "w-1.5 h-4" : "w-20 h-20 xl:w-26 xl:h-26");
        });
        tStyle['cog2'] = computed(() => {
            return "loading-" + color.value + ' ' +
                (target.value === "button" ? "w-1.5 h-4" : "w-12 h-12 xl:w-16 xl:h-16");
        });

        return { tStyle };
    }
});
</script>

<style scoped>
#cog1 {
    -webkit-animation: cog 2s infinite linear;
    animation: cog 2s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

#cog2 {
    -webkit-animation: cog 1.5s infinite linear reverse;
    animation: cog 1.5s infinite linear reverse;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

@-webkit-keyframes cog {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes cog {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>


================================================
FILE: resources/js/Components/Loading/Animations/TLoadingAnimationThreeBars.vue
================================================
<template>
    <div class="loading-three-bars">
        <div id="bar1" :class="tStyle" />
        <div id="bar2" :class="tStyle" />
        <div id="bar3" :class="tStyle" />
    </div>
</template>

<script>
import { toRefs, computed } from "vue";

export default {
    name: "TLoadingAnimationThreeBars",
    props: {
        title: {
            type: String,
            default: "loading"
        },
        color: {
            type: String,
            default: "gray"
        },
        target: {
            type: String,
            default: "button"
        }
    },
    setup(props) {
        const { color, target } = toRefs(props);
        /*Design Check*/
        const tStyle = computed(() => {

            return "loading-" + color.value + (target.value === "button" ? " w-1.5 h-4" : " w-4 h-16 xl:w-6 xl:h-24");
        });

        return { tStyle };
    }
};
</script>

<style scoped>
#bar1,
#bar2,
#bar3 {
    content: "&nbps";
    -webkit-animation: threeBars 1.2s infinite ease-in-out;
    animation: threeBars 1.2s infinite ease-in-out;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

#bar2 {
    -webkit-animation-delay: 50ms;
    animation-delay: 50ms;
}

#bar3 {
    -webkit-animation-delay: 150ms;
    animation-delay: 150ms;
}

@-webkit-keyframes threeBars {
    0% {
        opacity: 0.4;
        transform: scaleY(0.5);
    }
    50% {
        opacity: 1;
        transform: scaleY(1);
    }
    100% {
        opacity: 0.4;
        transform: scaleY(0.5);
    }
}

@keyframes threeBars {
    0% {
        opacity: 0.4;
        transform: scaleY(0.5);
    }
    50% {
        opacity: 1;
        transform: scaleY(1);
    }
    100% {
        opacity: 0.4;
        transform: scaleY(0.5);
    }
}
</style>


================================================
FILE: resources/js/Components/Loading/Animations/TLoadingAnimationThreeDots.vue
================================================
<template>
    <div class="loading-three-dots">
        <div id="dot1" :class="tStyle" />
        <div id="dot2" :class="tStyle" />
        <div id="dot3" :class="tStyle" />
    </div>
</template>

<script>
import { toRefs, computed } from "vue";

export default {
    name: "TLoadingAnimationThreeDots",
    props: {
        title: {
            type: String,
            default: "loading"
        },
        color: {
            type: String,
            default: "gray"
        },
        target: {
            type: String,
            default: "button"
        }
    },
    setup(props) {
        const { color, target } = toRefs(props);
        /*Design Check*/
        const tStyle = computed(() => {

            return "loading-" + color.value + ' ' +
                (target.value === "button" ? "w-2 h-2" : "w-8 h-8 xl:w-14 xl:h-14");
        });

        return { tStyle };
    }
};
</script>

<style scoped>
#dot1,
#dot2,
#dot3 {
    content: "&nbps";
    -webkit-animation: threeDots 1.2s infinite ease-in-out;
    animation: threeDots 1.2s infinite ease-in-out;
    border-radius: 999em;
    -moz-border-radius: 999em;
    -webkit-border-radius: 999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

#dot2 {
    -webkit-animation-delay: 150ms;
    animation-delay: 150ms;
}

#dot3 {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
}

@-webkit-keyframes threeDots {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes threeDots {
    0% {
        transform: scale(0);
    }
    30%,
    70% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
</style>


================================================
FILE: resources/js/Components/Loading/TLoading.vue
================================================
<script setup>
import { computed, defineAsyncComponent, ref, toRefs, watch, useSlots } from "vue";

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    color: {
        type: String,
        default: "gray"
    },
    title: {
        type: String,
        default: "Loading..."
    },
    message: {
        type: String,
        default: "Please wait, while your request being processed"
    },
    loadingDesign: {
        type: String,
        default: "three-bars"
    },
    loadingColor: {
        type: String,
        default: null
    },
    closeable: {
        type: Boolean,
        default: false
    },
    timer: {
        type: Number,
        default: null,
        required: false
    }
})

defineEmits(["update:modelValue"])

const { modelValue, timer, color, loadingDesign } = toRefs(props);

/*Design Check*/
const tStyle = computed(() => {
    return "loading-screen" + " " +
        "loading-screen-" + color.value;
});

/*Timer*/
const timerCounter = ref(0);
const countDownCounter = ref(0);
watch(modelValue, () => {
    if (timer.value && modelValue.value) {
        /*Timer Function*/
        setTimeout(() => {
            close();
        }, timer.value);

        /*Count Down Function*/
        let countDownFn = setInterval(() => {
            if (timer.value >= timerCounter.value) {
                countDownCounter.value = 100 - (timerCounter.value / timer.value) * 100;
                timerCounter.value += 4;
            } else {
                clearInterval(countDownFn);
                timerCounter.value = 0;
                close();
            }
        }, 1);
    }
})

/*Close*/
const close = () => {
    emit("update:modelValue", false);
};

/*Loading Component*/
const activeLoadingComponent = ref();
if (loadingDesign.value === "three-bars") {
    activeLoadingComponent.value = "TLoadingAnimationThreeBars";
} else if (loadingDesign.value === "three-dots") {
    activeLoadingComponent.value = "TLoadingAnimationThreeDots";
} else {
    activeLoadingComponent.value = "TLoadingAnimationCogs";
}

const loadingComponent = defineAsyncComponent(() => import(`./Animations/${activeLoadingComponent.value}.vue`));

/*Slot Check*/
const hasSlot = name => !!useSlots()[name];
</script>

<style scoped>
/*Show Hide Menu Titles*/
.fade-enter-active,
.fade-leave-active {
    transition: all 700ms ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
    transform: scaleX(1.1);
    filter: blur(4px);
    opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
    transform: scaleX(1);
    filter: blur(0);
    opacity: 1;
}
</style>

<template>
    <transition name="fade">
        <div :class="tStyle" v-if="modelValue">
            <!--Countdown Line-->
            <div v-if="timer" class="loading-screen-countdown">
                <div id="countdown" :style="{ width: countDownCounter + '%' }"></div>
            </div>
            <!--Close Icon-->
            <div v-if="closeable" class="loading-screen-close" @click="close">
                <svg
                    class="h-10 w-10"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M6 18L18 6M6 6l12 12"
                    />
                </svg>
            </div>
            <!--Content-->
            <div v-if="!hasSlot('default')" class="loading-screen-content">
                <!--Text Content-->
                <div id="wrapper">
                    <!--Title-->
                    <span id="title">{{ title }}</span>
                    <!--Message-->
                    <span id="message">{{ message }}</span>
                </div>
                <!--Animation-->
                <component
                    id="animation"
                    :is="loadingComponent"
                    :color="loadingColor ? loadingColor : color"
                    target="loading-screen"
                />
            </div>
            <!--Custom Content-->
            <div v-if="hasSlot('default')" id="custom-content">
                <slot></slot>
            </div>
        </div>
    </transition>
</template>


================================================
FILE: resources/js/Components/Misc/TComponentRadiusSelector.vue
================================================
<template>
  <div>
    <div v-if="inputStyle === 'checkbox'">
      <ul class="flex flex-wrap justify-center gap-2 p-2 bg-white bg-opacity-60 border-opacity-60 border rounded-lg lg:rounded-full items-center">
        <li
            v-for="(item,index) in radii"
            :key="index"
            :class="[
            item,
            'w-6 h-6 text-white items-center flex justify-center flex-shrink-0 cursor-pointer',
            selectedRadius === index ? 'bg-green-500' : 'bg-gray-500'
            ]"
            @click="selectedRadius=index; $emit('selected-radius',index)">{{index}}
        </li>
      </ul>
    </div>
    <!--<div v-if="inputStyle === 'select'" class="flex flex-col gap-4 justify-center items-start">
      <div class="flex flex-wrap gap-4 items-center">
        <t-input-select v-model="selectedRadius" place-holder="Radius">
          <t-input-select-item :disabled="true">
            Select a Radius
          </t-input-select-item>
          <t-input-select-item
              v-for="(item,itemKey,index) in radii"
              :key="index"
              :value="itemKey"
          >
            {{ itemKey }}
          </t-input-select-item>
        </t-input-select>
      </div>
      <div class="inline-flex gap-2">
        Radius Code:
        <t-badge color="white">:radius="{{ selectedRadius }}"</t-badge>
      </div>
    </div>-->
  </div>
</template>

<script>
import {defineComponent} from "vue";

import TInputSelect from "@/Components/Form/Inputs/TInputSelect.vue";
import TBadge from "@/Components/Badge/TBadge.vue";
export default defineComponent({
  name: "TComponentRadiusSelector",
  components: {TBadge, TInputSelect},
  props: {
    inputStyle: {
      type: String,
      default: 'checkbox'
    }
  },
  data(){
    return {
      selectedRadius: 3,
      radii: {
        '0' : '',
        '1' : 'rounded-sm',
        '2' : 'rounded',
        '3' : 'rounded-md',
        '4' : 'rounded-lg',
        '5' : 'rounded-xl',
        '6' : 'rounded-2xl',
        '7' : 'rounded-3xl',
        '8' : 'rounded-full',
      }
    }
  },
  watch:{
    selectedRadius(itemKey){
      this.$emit('selected-radius',itemKey)
    }
  }
})
</script>


================================================
FILE: resources/js/Components/Misc/TComponentStyleSelector.vue
================================================
<template>
  <div
    class="flex flex-wrap justify-center p-2 bg-white border border-gray-300 bg-opacity-60 border-opacity-60 rounded-lg lg:rounded-full">
    <div class="flex flex-wrap justify-center items-center space-x-2">
      <div v-if="selectData !== null" class="flex flex-wrap justify-center items-center space-x-2 text-sm">
        <template v-for="item in selectData">
          <t-input-select
            :options="item.options"
            v-model="modelData[item.key]"
            options-value-key="key"
            options-label-key="label"
            :place-holder="item.label"
            :radius="8"
            :disabled="false"
          />
        </template>
      </div>
      <ul class="grid grid-cols-5 my-2 md:grid-cols-10 gap-2 place-items-center items-center">
        <li
          v-for="(item,itemKey,index) in colorOptions"
          :key="index"
          :class="[
                    'w-5 h-5 rounded-full items-center flex justify-center flex-shrink-0 cursor-pointer',
                    item.style
                ]"
          @click="modelData.color = itemKey"
        >
          <t-check-icon
            v-if="modelValue['color']===itemKey"
            :class="[
                  'w-5 h-5',
                  itemKey === 'white' ? 'text-gray-600' : 'text-white'
                  ]"
          />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, watch } from "vue";

import TCheckIcon from "@/Components/Icon/TCheckIcon.vue";
import TInputSelect from "@/Components/Form/Inputs/TInputSelect.vue";

export default defineComponent({
  name: "TComponentStyleSelector",
  components: { TInputSelect, TCheckIcon },
  props: {
    selectData: {
      type: Array,
      default: null
    },
    modelValue: {
      type: Object,
      default(){
        return { color: null }
      }
    }
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    /*Definitions*/
    const { modelValue, selectData } = toRefs(props);
    const colorOptions = reactive({
      "red": {
        style: "bg-red-500",
        name: "Red"
      },
      "blue": {
        style: "bg-blue-500",
        name: "Blue"
      },
      "green": {
        style: "bg-green-500",
        name: "Green"
      },
      "yellow": {
        style: "bg-yellow-500",
        name: "Yellow"
      },
      "indigo": {
        style: "bg-indigo-500",
        name: "Indigo"
      },
      "purple": {
        style: "bg-purple-500",
        name: "Purple"
      },
      "pink": {
        style: "bg-pink-500",
        name: "Pink"
      },
      "gray": {
        style: "bg-gray-500",
        name: "Gray"
      },
      "white": {
        style: "bg-white border border-gray-200",
        name: "White"
      },
      "black": {
        style: "bg-black",
        name: "Black"
      }
    });
    const modelData = reactive(modelValue)

    watch(modelData,
      ()=>{
        emit("update:modelValue", modelData);
      })

    return {
      colorOptions,
      modelData
    };
  }
});
</script>


================================================
FILE: resources/js/Components/Misc/TComponentWidthSelector.vue
================================================
<template>
  <div>
    <div v-if="inputStyle === 'checkbox'">
      <ul class="flex flex-wrap justify-center gap-2 p-2 bg-white bg-opacity-60 border-opacity-60 border rounded-lg lg:rounded-full items-center">
        <li
            v-for="(item,index) in 6"
            :key="index"
            :class="[
            item,
            'w-6 h-6 text-white items-center flex justify-center flex-shrink-0 cursor-pointer',
            selectedWidth === item ? 'bg-green-500' : 'bg-gray-500'
            ]"
            @click="selectedWidth=item; $emit('selected-radius',item)">{{item}}
        </li>
      </ul>
    </div>
    <!--<div v-if="inputStyle === 'select'" class="flex flex-col gap-4 justify-center items-start">
      <div class="flex flex-wrap gap-4 items-center">
        <t-input-select v-model="selectedWidth" place-holder="Radius" :value="6">
          <t-input-select-item :disabled="true">
            Select a Width
          </t-input-select-item>
          <t-input-select-item
              v-for="(item,index) in 6"
              :key="index"
              :value="item"
          >
            {{ item }}
          </t-input-select-item>
        </t-input-select>
      </div>
      <div class="inline-flex gap-2">
        Width Code:
        <t-badge color="white">:width="{{ selectedWidth }}"</t-badge>
      </div>
    </div>-->
  </div>
</template>

<script>
import {defineComponent} from "vue";

import TInputSelect from "@/Components/Form/Inputs/TInputSelect.vue";
import TBadge from "@/Components/Badge/TBadge.vue";
export default defineComponent({
  name: "TComponentWidthSelector",
  components: {TBadge, TInputSelect},
  props: {
    inputStyle: {
      type: String,
      default: 'checkbox'
    }
  },
  data(){
    return {
      selectedWidth: 6,
    }
  },
  watch:{
      selectedWidth(item){
      this.$emit('selected-width',item)
    }
  }
})
</script>


================================================
FILE: resources/js/Components/Modal/TModal.vue
================================================
<template>
  <transition name="modal">
    <!--Container-->
    <div v-if="modelValue" :class="tStyle['container'] ">
      <!--Countdown Line-->
      <div v-if="timer" class="modal-countdown">
        <div id="countdown" :style="{width: countDownCounter+'%'}"></div>
      </div>
      <!--Modal Content Box-->
      <div
        :class="tStyle['box'] "
        ref="modalItem"
      >
        <!--Header-->
        <div class="modal-header">
          <!--Titles-->
          <div v-if="design==='elegant' && (title || subTitle)" id="title-container">
            <span v-if="design==='elegant'" id="top-title" v-text="title" />
            <span v-if="design==='elegant'" id="top-sub-title" v-text="subTitle" />
          </div>
          <!--Buttons-->
          <div :class="tStyle['actionsContainer']">
            <!--Action-->
            <div v-if="hasSlot('action-buttons')" class="modal-action-buttons">
              <slot name="action-buttons" />
            </div>
            <!--Close-->
            <div
              v-if="closeButton"
              class="modal-close-button"
              @click="close()"
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24"
                   stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </div>
          </div>
        </div>
        <!--Header Separator-->
        <div v-if="design==='elegant'" id="header-separator" />
        <!--Content-->
        <div :class="tStyle['content']">
          <!--Icon-->
          <div v-if="icon || hasSlot('icon')" class="modal-icon">
            <svg v-if="icon" v-html="iconList.find(i=>i.key === icon).content" :class="tStyle['icon'] " />
            <slot v-else name="icon" />
          </div>
          <!--Titles-->
          <div v-if="design!=='elegant' && (title || subTitle)" id="content-title-container">
            <span v-if="design!=='elegant' && title" id="content-title" v-text="title" />
            <span v-if="design!=='elegant' && subTitle" id="content-sub-title" v-text="subTitle" />
          </div>
          <!--Content-->
          <div v-if="content || hasSlot('content')" class="modal-content">
            <span v-if="content" v-html="content" class="modal-content-default"/>
            <slot name="content" />
          </div>
        </div>
        <!--Footer-->
        <div
          v-if="hasSlot('footer-left') || hasSlot('footer-center') || hasSlot('footer-right')"
          class="modal-footer-container"
        >
          <!--Left-->
          <div class="modal-footer-left">
            <span class="modal-footer-item" v-show="hasSlot('footer-left')">
              <slot name="footer-left" />
            </span>
          </div>
          <!--Center-->
          <div class="modal-footer-center">
            <span class="modal-footer-item" v-show="hasSlot('footer-center')">
              <slot name="footer-center" />
            </span>
          </div>
          <!--Right-->
          <div class="modal-footer-right">
            <span class="modal-footer-item" v-show="hasSlot('footer-right')">
              <slot name="footer-right" />
            </span>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { computed, defineComponent, reactive, toRefs, watch, useSlots } from "vue";
import { ref } from "vue";
import { useKeypress } from "vue3-keypress";
import { onClickOutside } from "@vueuse/core";

export default defineComponent({
  name: "TModal",
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: function() {
        return "modal-" + Number(new Date());
      }
    },
    bgColor: {
      type: String,
      default: "gray"
    },
    darkMode: {
      type: Boolean,
      default: false
    },
    design: {
      type: String,
      default: "filled"
    },
    color: {
      type: String,
      default: "white"
    },
    radius: {
      type: Number,
      default: 3
    },
    esc: {
      type: Boolean,
      default: false
    },
    outSideClick: {
      type: Boolean,
      default: false
    },
    closeButton: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: null,
      require: false
    },
    subTitle: {
      type: String,
      default: null,
      require: false
    },
    content: {
      type: String,
      default: null,
      require: false
    },
    icon: {
      type: String,
      default: null,
      require: false
    },
    timer: {
      type: Number,
      default: null,
      require: false
    }
  },
  emits: ['destroy', 'update:modelValue'],
  setup(props, { slots, emit }) {
    /*Definitions*/
    const {
      modelValue,
      id,
      darkMode,
      design,
      color,
      radius,
      bgColor,
      esc,
      outSideClick,
      icon,
      timer,
      content,
      title,
      subTitle
    } = toRefs(props);
    const modalItem = ref(null);
    const iconList = [
      {
        key: "success",
        content: "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n" +
          "  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n" +
          "</svg>",
        color: "text-green-500"
      },
      {
        key: "warning",
        content: "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n" +
          "  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\" />\n" +
          "</svg>",
        color: "text-yellow-500"
      },
      {
        key: "error",
        content: "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n" +
          "  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n" +
          "</svg>",
        color: "text-red-500"
      },
      {
        key: "info",
        content: "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n" +
          "  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n" +
          "</svg>",
        color: "bg-blue-500"
      },
      {
        key: "question",
        content: "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n" +
          "  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n" +
          "</svg>",
        color: "text-indigo-500"
      }
    ];

    /*ESC Key Action*/
    if (esc.value) {
      const someSuccessCallback = () => {
        close();
      };

      useKeypress({
        keyEvent: "keydown",
        keyBinds: [
          {
            keyCode: "esc", // or keyCode as integer, e.g. 40
            success: someSuccessCallback
          }
        ]
      });
    }

    /*Outside Click Action*/
    if (outSideClick.value) {
      onClickOutside(modalItem, () => close());
    }

    /*Close Action*/
    const close = () => {
      emit("destroy", id.value);
      emit("update:modelValue", false);
    };

    /*Timer*/
    watch(modelValue, (value) => {
      if (value && timer.value) {
        autoClose();
      }
    });
    const timerCounter = ref(0);
    const countDownCounter = ref(0);
    const autoClose = () => {
      /*Timer Function*/
      setTimeout(() => {
        close();
      }, timer.value);

      /*Count Down Function*/
      const countDownFn = setInterval(() => {
        if (timer.value >= timerCounter.value) {
          countDownCounter.value = (timerCounter.value / timer.value) * 100;
          timerCounter.value += 4;
        } else {
          timerCounter.value = 0;
          countDownCounter.value = 0;
          clearInterval(countDownFn);
        }
      }, 1);
    };

    /*Generating Style Classes*/
    const tStyle = reactive({})
    tStyle['container'] = computed(() => {
      return "modal-container" + " " +
        "modal-container-" + bgColor.value;
    });
    tStyle['actionsContainer'] = computed(() => {
      return "modal-actions-container" + " " +
        (design.value!=='elegant' ? 'w-full justify-end' : '');
    });
    tStyle['content'] = computed(() => {
      let style
      if((content.value || title.value || subTitle.value) && !hasSlot('content') ){
        style='modal-content-container'
      }
      if(hasSlot('content')){
        style='modal-custom-content-container'
      }
      if(content.value && hasSlot('content')){
        style='modal-content-container'
      }

      if(!hasSlot('footer-left') && !hasSlot('footer-center') && !hasSlot('footer-right')){
        style = style + ' ' + 'pb-8'
      }
      return style
    });
    tStyle['box']  = computed(() => {
      return "modal-box" + " " +
        "modal-" + design.value + (darkMode.value ? "-dark" : "-light") + " " +
        "modal-" + design.value + "-base" + " " +
        "modal-" + design.value + "-" + color.value + " " +
        "radius-" + radius.value;
    });
    tStyle['icon']  = computed(() => {
      return "modal-icon-default" + " " +
        iconList.find(i => i.key === icon.value).color;
    });

    /*Icon*/

    /*Slot Check*/
    const hasSlot = name => !!useSlots()[name];

    return { hasSlot, close, tStyle, iconList, countDownCounter, modalItem };
  }
});
</script>

<style scoped>
.modal-enter-active, .modal-leave-active {
  transition: all 500ms;
}

.modal-enter-from, .modal-leave-to {
  opacity: 0;
}

.modal-leave-from, .modal-enter-to {
  opacity: 1;
}
</style>


================================================
FILE: resources/js/Components/Paginate/TBackEndTablePaginate.vue
================================================
<template>
  <div :class="tStyle['container']">
    <div v-if="detail || jump" class="bet-pagination-detail-container">
      <div class="bet-pagination-detail-text">
        {{ detailGeneratedText }}
      </div>
      <div v-if="jump" class="bet-pagination-detail-jump-container">
        <span>-</span>
        <input type="text"
               v-model="jumpPage"
               @keypress.enter="selectPage(Number(jumpPage))"
               :class="tStyle['jumpInput']"
               :style="{width:Math.floor(pageCount.toString().length)-(.25*pageCount.toString().length-.8)+'rem'}"
               :maxlength="pageCount.toString().length"
        />
        <span :class="tStyle['jumpButton']" @click="selectPage(Number(jumpPage))">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z"
                  clip-rule="evenodd" />
          </svg>
        </span>
      </div>
    </div>
    <div class="flex flex-grow"></div>
    <div :class="tStyle['counter']">
      <div
        :class="tStyle['previous']"
        @click="previousPage"
      >
        <svg xmlns="http://www.w3.org/2000/svg" :class="['h-6 w-6', arrowText ? '-mx-1 md:-ml-2 md:-mr-1' : '']"
             fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
        <span v-if="arrowText" v-text="previousText" class="bet-pagination-arrow-text" />
      </div>
      <template v-for="item in dynamicRange" :key="item">
        <div
          :class="itemStyle(item)"
          @click="selectPage(item)">
          {{ item }}
        </div>
      </template>
      <div
        :class="tStyle['next']"
        @click="nextPage"
      >
        <span v-if="arrowText" v-text="nextText" class="bet-pagination-arrow-text" />
        <svg xmlns="http://www.w3.org/2000/svg" :class="['h-6 w-6', arrowText ? '-mx-1 md:-mr-2 md:-ml-1' : '']"
             fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, ref, toRefs } from "vue";

export default defineComponent({
  name: "TBackEndTablePaginate",
  props: {
    modelValue: {
      type: Number,
      default: 1
    },
    darkMode:{
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: "gray"
    },
    reverse: {
      type: Boolean,
      default: false
    },
    radius: {
      type: Number,
      default: 3
    },
    detail: {
      type: Boolean,
      default: true
    },
    jump: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 1
    },
    range: {
      type: Number,
      default: 5
    },
    perPageItem: {
      type: Number,
      default:1
    },
    arrow: {
      type: Boolean,
      default: true
    },
    arrowText: {
      type: Boolean,
      default: true
    },
    detailText: {
      type: String,
      default: "detailText"
    },
    nextText: {
      type: String,
      default: "next"
    },
    previousText: {
      type: String,
      default: "previous"
    }
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    /*Definitions*/
    const { total, radius, darkMode, modelValue, range, perPageItem,reverse, detailText } = toRefs(props);
    const jumpPage = ref(null);

    /*Select, Next and Previous Page Change Action*/
    const nextPage = () => {
      if (Math.ceil(pageCount.value / range.value) > Math.ceil(modelValue.value / range.value)) {
        let newPage = (Math.ceil(modelValue.value / range.value)) * range.value + 1;
        emit("update:modelValue", newPage);
      }
    };
    const previousPage = () => {
      if (modelValue.value > range.value) {
        let newPage = Math.floor(modelValue.value / range.value) * range.value;
        if (modelValue.value === newPage) {
          newPage = newPage - range.value;
        }
        emit("update:modelValue", newPage);
      }
    };
    const selectPage = (item) => {
      let newPage;
      if (isNaN(item)) {
        newPage = 1;
      } else {
        if (item > pageCount.value) {
          newPage = pageCount.value;
        } else if (1 > item) {
          newPage = 1;
        } else {
          newPage = item;
        }
      }

      emit("update:modelValue", newPage);
    };
    const pageCount = computed(()=>{
      return Math.ceil(total.value/perPageItem.value)
    })
    const dynamicRange = computed(() => {
      let newRange = [];
      let start;
      start = (Math.floor(modelValue.value / range.value)) * range.value;
      /*Fixing zero*/
      if (start < 0) {
        start = 1;
      } else if (modelValue.value % range.value !== 0) {
        start = start + 1;
        for (let i = start; (start + range.value) > i; i++) {
          if (pageCount.value >= i) {
            newRange.push(i);
          }
        }
      } else if (modelValue.value % range.value === 0) {
        start = start - (range.value - 1);
        for (let i = start; (start + range.value) > i; i++) {
          if (pageCount.value >= i) {
            newRange.push(i);
          }
        }
      }
      return newRange;
    });

    /*Generate Detail Text*/
    const detailGeneratedText = computed(() => {
      let finalText;
      finalText = detailText.value.replace("$a", modelValue.value.toString());
      finalText = finalText.replace("$b", pageCount.value.toString());

      return finalText;
    });

    /*Generating Style Classes*/
    const tStyle = reactive({});
    tStyle["container"] = computed(() => {
      return "bet-pagination-container" + " " +
        "bet-pagination-" + (darkMode.value ? 'dark' : 'light')+ " " +
        (reverse.value ? "flex-row-reverse" : "");
    });
    tStyle["counter"] = computed(() => {
      return "bet-pagination-counters" + " " +
        "radius-" + radius.value;
    });
    tStyle["jumpInput"] = computed(() => {
      return "bet-pagination-detail-jump-input" + " " +
        "radius-tl-" + radius.value + " " + "radius-bl-" + radius.value;
    });
    tStyle["jumpButton"] = computed(() => {
      return "bet-pagination-detail-jump-button" + " " +
        "radius-tr-" + radius.value + " " + "radius-br-" + radius.value;
    });
    const itemStyle = (item) => {
      return (modelValue.value === item ? "bet-pagination-active-item" : "bet-pagination-item");
    };
    tStyle["previous"] = computed(() => {
      return (range.value >= modelValue.value ? "bet-pagination-passive-arrow" : "bet-pagination-arrow");
    });
    tStyle["next"] = computed(() => {
      return (Math.ceil(modelValue.value / range.value) === Math.ceil(pageCount.value / range.value) ? "bet-pagination-passive-arrow" : "bet-pagination-arrow");
    });

    return {
      nextPage,
      previousPage,
      tStyle,
      itemStyle,
      selectPage,
      detailGeneratedText,
      dynamicRange,
      jumpPage,
      pageCount
    };
  }
});
</script>


================================================
FILE: resources/js/Components/Paginate/TPaginate.vue
================================================
<template>
    <div
        class="pagination-container"
        :class="[
            `pagination-${design}-base`,
            `pagination-${design}-${color}`,
            {'flex-wrap-reverse' : reverse}
          ]"
    >
        <!--Detail-->
        <div v-if="detail || jump" class="pagination-detail-container">
            <!--Text-->
            <div class="pagination-detail-text">
                {{ t(detailText, {activePage: modelValue, totalPage: totalPage, totalRecord: total}) }}
            </div>
        </div>
        <!--Jump Button-->
        <div v-if="jump" class="pagination-detail-jump-container">
            <input
                type="text"
                :maxlength="total.toString().length"
                v-model="jumpPage"
                @keypress.enter="selectPage(Number(jumpPage))"
                class="pagination-detail-jump-input"
                :style="{width:Math.floor(total.toString().length)-(.25*total.toString().length-.5)+'rem'}"
            />
            <span @click="selectPage(Number(jumpPage))" class="pagination-detail-jump-button">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z"
                  clip-rule="evenodd"/>
          </svg>
                </span>
        </div>
        <!--Filler-->
        <div class="flex flex-grow"></div>
        <!--Counter Container-->
        <div
            class="pagination-counters"
            :class="`radius-${radius}`"
        >
            <!--Previous-->
            <div
                :class="range >= modelValue ? 'pagination-passive-arrow' : 'pagination-arrow'"
                @click="previousPage"
            >
                <svg xmlns="http://www.w3.org/2000/svg"
                     :class="['h-6 w-6', arrowText ? '-mx-1 md:-ml-2 md:-mr-1' : '']"
                     fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                <span v-if="arrowText" v-text="t(previousText)" class="pagination-arrow-text"/>
            </div>
            <!--Counter-->
            <template v-for="item in dynamicRange" :key="item">
                <span
                    :class="modelValue === item ? 'pagination-active-item' : 'pagination-item'"
                    @click="selectPage(item)"
                    v-text="item"
                />
            </template>
            <!--Next-->
            <div
                :class="Math.ceil(modelValue / range) === Math.ceil(totalPage / range) ? 'pagination-passive-arrow' : 'pagination-arrow'"
                @click="nextPage"
            >
                <span v-if="arrowText" v-text="t(nextText)" class="pagination-arrow-text"/>
                <svg xmlns="http://www.w3.org/2000/svg"
                     :class="['h-6 w-6', arrowText ? '-mx-1 md:-mr-2 md:-ml-1' : '']"
                     fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </div>
        </div>
    </div>
</template>

<script>
import {computed, defineComponent, ref, toRefs} from "vue";
import {useI18n} from "vue-i18n";
import pagination_tr from "@/Lang/tr/pagination_lang";
import pagination_en from "@/Lang/en/pagination_lang";

export default defineComponent({
    name: "TPaginate",
    props: {
        modelValue: {
            type: Number,
            default: 1
        },
        design: {
            type: String,
            default: "filled"
        },
        color: {
            type: String,
            default: "gray"
        },
        reverse: {
            type: Boolean,
            default: false
        },
        radius: {
            type: Number,
            default: 3
        },
        detail: {
            type: Boolean,
            default: true
        },
        jump: {
            type: Boolean,
            default: false
        },
        total: {
            type: Number,
            default: 1
        },
        range: {
            type: Number,
            default: 5
        },
        arrowText: {
            type: Boolean,
            default: true
        },

        detailText: {
            type: String,
            default: "detailText"
        },
        nextText: {
            type: String,
            default: "next"
        },
        previousText: {
            type: String,
            default: "previous"
        }
    },
    emits: ["update:modelValue"],
    setup(props, {emit}) {
        /*Definitions*/
        const {total, modelValue, range} = toRefs(props);
        const jumpPage = ref(null);
        const {t} = useI18n({
            messages: {
                en: pagination_en,
                tr: pagination_tr
            }
        });

        /*Calculate Total Page*/
        const totalPage = computed(() => {
            return Math.ceil(total.value / range.value)
        })
        /*Select, Next and Previous Page Change Action*/
        const nextPage = () => {
            if (Math.ceil(totalPage.value / range.value) > Math.ceil(modelValue.value / range.value)) {
                let newPage = (Math.ceil(modelValue.value / range.value)) * range.value + 1;
                emit("update:modelValue", newPage);
            }
        };
        const previousPage = () => {
            if (modelValue.value > range.value) {
                let newPage = Math.floor(modelValue.value / range.value) * range.value;
                if (modelValue.value === newPage) {
                    newPage = newPage - range.value;
                }
                emit("update:modelValue", newPage);
            }
        };
        const selectPage = (item) => {
            let newPage;
            if (isNaN(item)) {
                newPage = 1;
            } else {
                if (item > totalPage.value) {
                    newPage = totalPage.value;
                } else if (1 > item) {
                    newPage = 1;
                } else {
                    newPage = item;
                }
            }

            emit("update:modelValue", newPage);
        };
        const dynamicRange = computed(() => {
            let newRange = [];
            let start;
            start = (Math.floor(modelValue.value / range.value)) * range.value;
            /*Fixing zero*/
            if (start < 0) {
                start = 1;
            } else if (modelValue.value % range.value !== 0) {
                start = start + 1;
                for (let i = start; (start + range.value) > i; i++) {
                    if (totalPage.value >= i) {
                        newRange.push(i);
                    }
                }
            } else if (modelValue.value % range.value === 0) {
                start = start - (range.value - 1);
                for (let i = start; (start + range.value) > i; i++) {
                    if (totalPage.value >= i) {
                        newRange.push(i);
                    }
                }
            }
            return newRange;
        });

        return {
            nextPage,
            previousPage,
            totalPage,
            selectPage,
            dynamicRange,
            jumpPage,
            t
        };
    }
});
</script>


================================================
FILE: resources/js/Components/Progress/TProgress.vue
================================================
<template>
  <div class="progress">
    <div class="progress-container">
      <div v-text="title"></div>
      <div>{{ tCounterText }}</div>
    </div>
    <transition name="progress">
      <div :class="tStyle['height']">
        <transition name="progress">
          <div
            :class="tStyle['line']"
            :style="'width:'+counter+'%'"
          />
        </transition>
      </div>
    </transition>
  </div>
</template>

<script>
import { defineComponent, toRefs, computed, reactive } from "vue";

export default defineComponent({
  name: "TProgress",
  props: {
    title: {
      type: String,
      default: null
    },
    modelValue: {
      type: Number,
      default: 10
    },
    color: {
      type: String,
      default: "green"
    },
    height: {
      type: Number,
      default: 3
    },
    counterText: {
      type: String,
      default: "$a%"
    },
    max: {
      type: Number,
      default: 100
    }
  },
  setup(props) {
    /*Definitions*/
    const { counterText, modelValue, color, height, max } = toRefs(props);

    /*Counter*/
    const counter = computed(() => {
      if (modelValue.value >= 0 && modelValue.value !== null && !isNaN(modelValue.value)) {
        if ((modelValue.value / max.value) * 100 > 100) {
          return 100;
        } else {
          return (modelValue.value / max.value) * 100;
        }
      } else {
        return 0;
      }
    });
    const tCounterText = computed(() => {
      let finalText;
      finalText = counterText.value.toString().replace("$a", max.value === 100 ? counter.value.toString() : modelValue.value);
      return finalText;
    });

    /*Generating Style Classes*/
    const tStyle = reactive({});
    tStyle["height"] = computed(() => {
      return "progress-value" + " " +
        "progress-height-" + height.value;
    });
    tStyle["line"] = computed(() => {
      return "progress-counter-line" + " " +
        "progress-" + color.value;
    });


    return { counter, tCounterText, tStyle };
  }
});
</script>


================================================
FILE: resources/js/Components/Tab/TTab.vue
================================================
<template>
  <div v-if="!data.find(t=>t.id === modelValue) && modelValue !== null" class="w-full col-span-full">
    <t-alert design="elegant" title="attention" color="yellow">
      Undefined tab id, please check your id
    </t-alert>
  </div>
  <div v-else :class="tStyle['container']">
    <div class="tab-title-container">
      <div v-for="item in data" :key="item.id" @click="select(item.id)" :class="titleStyle(item.id)">
        <slot name="icon" :props="item" />
        {{ item.title }}
      </div>
    </div>

    <div class="tab-content">
      <span
        v-if="data.find(c => c.id === active).content"
        v-text="data.find(c => c.id === active).content"
      />
      <slot name="content" :props="data.find(c => c.id === active)"/>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, ref, toRefs } from "vue";
import TAlert from "@/Components/Alert/TAlert.vue";

export default defineComponent({
  name: "TTab",
  components: { TAlert },
  props: {
    data: {
      type: Array,
      default() {
        return [
          { id: 0, content: "Sample Content" }
        ];
      }
    },
    modelValue: {
      type: [Number, String, Date],
      default: null
    },
    design: {
      type: String,
      default: "filled"
    },
    color: {
      type: String,
      default: "gray"
    },
    coloredText: {
      type: Boolean,
      default: false
    },
    darkMode: {
      type: Boolean,
      default: false
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    /*Definitions*/
    const { modelValue, data, design, color, darkMode, coloredText } = toRefs(props);
    const active = ref(modelValue.value ? modelValue.value : data.value[0].id);

    /*Select Action*/
    const select = (id) => {
      active.value = id;
      emit("update:modelValue", id);
    };

    /*Generating Style Classes*/
    const tStyle = reactive({});
    tStyle["container"] = computed(() => {
      return "tab" + " " +
        "tab-" + design.value + "-base" + " " +
        "tab-" + (darkMode.value ? "dark" : "light") + " " +
        "tab-" + design.value + "-" + color.value;
    });
    const titleStyle = (id) => {
      return (active.value === id ? 'tab-title-active' : 'tab-title') + ' ' +
        (!coloredText.value ? 'tab-'+ design.value +'-simple-text' : '')
    };

    return { active, select, tStyle, titleStyle };
  }
});
</script>



================================================
FILE: resources/js/Components/Table/TBackEndTable.vue
================================================
<template>
    <div
        class="table-outside-container"
        :class="`table-${design}`"
    >
        <!--Top Content-->
        <div
            v-if="hasSlot('search') || hasSlot('top-right') || hasSlot('top-left') || simpleSearchableFields.length>0"
            class="table-top"
        >
            <!--Left-->
            <div
                v-if="simpleSearchableFields.length>0"
                class="table-top-left"
            >
                <!--Search-->
                <t-input-text
                    id="search"
                    type="text"
                    v-model="searchObj.simpleSearchText"
                    :radius="radius"
                    :placeholder="t('searchPlaceHolder')"
                    :disabled="showAdvancedSearchPanel"
                >
                    <template #icon>
                        <!--Search Icon-->
                        <svg
                            class="w-6 h-6"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                            />
                        </svg>
                    </template>
                </t-input-text>
                <!--Customize Showing Options-->
                <t-button
                    :radius="radius"
                    border
                    @click="showCustomizeModal = !showCustomizeModal"
                >
                    <!--Options Icon-->
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
                        />
                    </svg>
                </t-button>
                <!--Advanced Search Button-->
                <t-button
                    v-if="advancedSearchableFields.length>0"
                    :radius="radius"
                    border
                    @click="showAdvancedSearchPanel = !showAdvancedSearchPanel"
                >
                    <!--Advanced Search Icon-->
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
                        />
                    </svg>
                </t-button>
                <!--Custom Top Left Content-->
                <slot name="top-left"/>
            </div>
            <!--Right-->
            <div
                v-if="hasSlot('top-right')"
                class="table-top-right"
            >
                <!--Custom Top Right Content-->
                <slot name="top-right"/>
            </div>
        </div>
        <!--Advanced Filters Area-->
        <transition name="tableSearch">
            <div
                v-if="showAdvancedSearchPanel"
            >
                <div
                    class="table-advanced-search-container"
                    :class="`radius-${radius}`"
                >
                    <span id="title" v-text="t('advancedSearch')"/>
                    <div class="table-advanced-search-content-wrapper">
                        <div
                            v-for="field in advancedSearchableFields"
                            :key="field.key"
                        >

                            <t-input-group :label="field.label ?? field.key">
                                <!--Text-->
                                <t-input-text
                                    v-if="field.advancedSearchInputType==='text'"
                                    v-model="searchObj.advancedSearchFields[field.searchKey].value"
                                    v-model:selectValue="searchObj.advancedSearchFields[field.searchKey].condition"
                                    :options="field.compareOperators"
                                    :options-label-key="field.advancedSearchSelectLabelKey"
                                    :options-value-key="field.advancedSearchSelectValueKey"
                                    :select-position="field.compareOperators ? 'right' : ''"
                                    select-type="inside"
                                />
                                <!--Select-->
                                <t-input-select
                                    v-if="field.advancedSearchInputType==='select'"
                                    v-model.lazy="searchObj.advancedSearchFields[field.searchKey].value"
                                    :options="field.advancedSearchSelectInputSource"
                                    :options-label-key="field.advancedSearchSelectLabelKey"
                                    :options-value-key="field.advancedSearchSelectValueKey"
                                    :search="field.advancedSearchSelectSearch"
                                    :search-place-holder="field['advancedSearchSelectSearchPlaceHolder'] !== null ? field['advancedSearchSelectSearchPlaceHolder'] : null"
                                    :place-holder="field['advancedSearchSelectPlaceHolder'] !== null ? field['advancedSearchSelectPlaceHolder'] : null"
                                />
                                <!--Between-->
                                <t-input-between
                                    v-if="field.advancedSearchInputType==='between'"
                                    v-model="searchObj.advancedSearchFields[field.searchKey].value"
                                />
                            </t-input-group>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!--Errors-->
        <div class="grid grid-cols-1 gap-2">

            <template v-for="error in tableErrors">

                <t-alert
                    v-if="error.status"
                    :key="error.title"
                    :title="`${error.title} ${t('missing')}`"
                    :radius="radius"
                    color="yellow"
                    design="outline"
                >
                    <template #icon>
                        <svg class="w-10 h-10 dark:text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                        </svg>
                    </template>
                    <div v-html="t(error.errorText)"/>
                </t-alert>

            </template>

        </div>
        <!--Table-->
        <div
            v-if="header.length>0 && content"
            class="overflow-x-auto scrollbar scrollbar-thin transition-size-medium"
            :class="{'opacity-25' : dataLoading}"
        >
            <table class="table-container">
                <!--Header-->
                <thead>
                <!--Header Row-->
                <tr>
                    <!--Header Items-->
                    <th
                        v-for="item in regeneratedHeader"
                        :key="item.key"
                        :style="{width: item.width ? item.width+'%' : 'auto'}"
                    >
                        <div
                            :class="[
                                'table-header-cell',
                                {'cursor-pointer' : sortableFields.includes(item.key)}  ,
                                item.align === 'right' ? 'justify-end' :
                                item.align === 'center' ? 'justify-center' :
                                'justify-start'
                                ]"
                            @click="
                            sortableFields.includes(item.key) ?
                            [searchObj.sortKey=item.key , searchObj.sortDirection= !searchObj.sortDirection] :
                            ''"
                        >
                            <!--Label-->
                            <span v-text="item.label ?? item.key"/>
                            <!--Sort Icon-->
                            <span v-show="sortableFields.includes(item.key)">
                                <transition name="fade" mode="out-in">
                  <!--Sort Direction Icon-->
                  <svg
                      v-if="searchObj.sortKey===item.key"
                      class="h-5 w-5"
                      :class="[
                        'transform transition',
                        searchObj.sortDirection ? 'rotate-180' : ''
                        ]"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none" viewBox="0 0 24 24"
                      stroke="currentColor"
                  >
                  <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M17 13l-5 5m0 0l-5-5m5 5V6"
                  />
                </svg>
                                    <!--Sort Placeholder Icon-->
                  <svg
                      v-else
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-5 w-5 opacity-50"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                  >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M8 9l4-4 4 4m0 6l-4 4-4-4"
                    />
                  </svg>
                </transition>
                            </span>
                        </div>

                    </th>
                    <!--Actions Header Cell-->
                    <td v-if="actions.length>0" class="table-header-cell">
                        <span
                            class="text-right w-full"
                            v-text="actionsHeaderText"
                        ></span>
                    </td>
                </tr>
                </thead>
                <!--Content-->
                <tbody>
                <!--Content Rows-->
                <tr
                    v-for="(item,itemIndex) in regeneratedContent"
                    :key="itemIndex"
                    class="table-content-row"
                    :class="[
                        {'table-content-zebra-row': rowZebra},
                        {'table-content-hover-row': rowHover},
                        {'table-content-border-row': rowBorder},
                        ]"
                >
                    <!--Cells of The Content Row-->
                    <template v-for="(cell,cellKey,cellIndex) in item">
                        <td
                            :key="cellKey"
                            v-if="cellKey !== uniqueId"
                            class="table-content-cell"
                            :class="contentCellStyle(itemIndex+1,cellIndex+1)"
                        >
                            <div
                                :class="[
                                'flex',
                                regeneratedHeader.find(h=>h.key === cellKey).align === 'right' ? 'justify-end' :
                                regeneratedHeader.find(h=>h.key === cellKey).align === 'center' ? 'justify-center' :
                                'justify-start'
                                ]"
                            >
                                <!--Raw Content-->
                                <span v-if="!hasSlot(cellKey)" v-text="cell"/>
                                <!--SlotScope Content-->
                                <slot
                                    v-else
                                    :name="cellKey"
                                    :props="item"
                                />
                            </div>
                        </td>
                    </template>
                    <!--Actions Cell-->
                    <td
                        v-if="actions.length>0"
                        class="table-content-cell"
                        :class="actionsCellStyle(itemIndex+1)"
                    >
                        <div class="flex justify-end">
                            <t-dropdown align="right" button-design="outline" trigger-type="rich" size="fit">
                                <template #trigger>
                                    <div class="flex h-full items-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"/>
                                        </svg>
                                    </div>
                                </template>
                                <div
                                    class="flex justify-between items-center px-2 border dark:border-transparent dark:shadow-dark bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 p-1"
                                    :class="`radius-${radius}`"
                                >
                                    <div
                                        class="hover:bg-red-100 hover:text-red-500 dark:hover:text-gray-200 dark:hover:bg-red-500 dark:hover:bg-opacity-75 cursor-pointer text-sm px-2"
                                        :class="`radius-${radius}`"
                                        @click="selectItem($event, item, 'delete')"
                                    >
                                        <div class="flex items-center h-6">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
                                                 viewBox="0 0 24 24"
                                                 stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                      stroke-width="2"
                                                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                            </svg>
                                            {{ t('actionDelete') }}
                                        </div>
                                    </div>
                                    <div
                                        class="hover:bg-indigo-100 hover:text-indigo-500 dark:hover:text-gray-200 dark:hover:bg-indigo-500 dark:hover:bg-opacity-75 cursor-pointer text-sm px-2"
                                        :class="`radius-${radius}`"
                                        @click="selectItem($event, item, 'edit')"
                                    >
                                        <div class="flex items-center h-6">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
                                                 viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                      stroke-width="2"
                                                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                            </svg>
                                            {{ t('actionEdit') }}
                                        </div>
                                    </div>
                                    <div
                                        class="hover:bg-blue-100 hover:text-blue-500 dark:hover:text-gray-200 dark:hover:bg-blue-500 dark:hover:bg-opacity-75 cursor-pointer text-sm px-2"
                                        :class="`radius-${radius}`"
                                        @click="selectItem($event, item, 'view')"
                                    >
                                        <div class="flex items-center h-6">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
                                                 viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                      stroke-width="2"
                                                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                      stroke-width="2"
                                                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                            </svg>
                                            {{ t('actionView') }}
                                        </div>
                                    </div>
                                </div>
                            </t-dropdown>
                        </div>
                    </td>
                </tr>
                <!--Empty Content Notification-->
                <tr v-if="regeneratedContent.length === 0">
                    <td
                        :colspan="regeneratedHeader.length+(actions.length>0 ? 1 : 0)"
                    >
                        <div
                            class="table-no-content"
                            :class="`radius-${radius}`"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <span v-text="t('anyContentMessage')"/>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>

            <!--Paginator-->
            <div
                class="table-paginator"
                v-if="content.per_page ? content.total>=content.per_page : content.meta.total>=content.meta.per_page"
            >
                <t-paginate
                    v-model="activePage"
                    :jump="paginationJump"
                    :total="content.total ? content.total : content.meta.total"
                    :range="5"
                    :radius="radius"
                    :per-page-item="Number(content.per_page ? content.per_page : content.meta.per_page)"
                    :previous-text="paginationPreviousText"
                    :next-text="paginationNextText"
                    :detail="paginationDetail"
                    :detail-text="paginationDetailText"
                    :reverse="paginationDetailReverse"
                />
            </div>
        </div>
    </div>

    <!--Modals-->
    <teleport to="body">
        <!--Header Fields/Per-page Item Customize Modal-->
        <t-modal
            v-model="showCustomizeModal"
            :title="t('optionsModalTitle')"
            design="elegant"
        >
            <template #content>
                <div class="flex flex-col text-left">
                    <h4 class="font-bold text-sm" v-text="t('optionsModalColumnOrder')"/>
                    <div class="flex flex-col max-w-min mt-4">
                        <div
                            v-for="(item, itemIndex) in header"
                            :key="item.key"
                            @drop="onDrop($event,'new',itemIndex)"
                            @dragenter.prevent
                            @dragover.prevent
                            @dragstart="startDrag($event,'old',itemIndex)"
                            @dragleave="onDragLeave($event)"
                            @dragover="onDragOver($event)"
                            :draggable="true"
                            class="relative inline-flex items-center space-x-1 px-2 py-1"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 cursor-move" fill="none"
                                 viewBox="0 0 24 24"
                                 stroke="currentColor">
                                <g
                                    id="g10617"
                                    transform="translate(1.0812535,-0.72530103)">
                                    <rect
                                        style="fill:none;fill-opacity:0.694779;stroke-width:2.22226;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:8"
                                        id="rect10347"
                                        width="2"
                                        height="2"
                                        x="14.130877"
                                        y="11.725301"
                                        rx="0"/>
                                    <rect
                                        style="fill:none;fill-opacity:0.694779;stroke-width:2.22226;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:8"
                                        id="rect10347-4"
                                        width="2"
                                        height="2"
                                        x="5.7066164"
                                        y="20.149561"
                                        rx="0"/>
                                    <rect
                                        style="fill:none;fill-opacity:0.694779;stroke-width:2.22226;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:8"
                                        id="rect10347-8"
                                        width="2"
                                        height="2"
                                        x="5.7066164"
                                        y="3.3010411"
                                        rx="0"/>
                                    <rect
                                        style="fill:none;fill-opacity:0.694779;stroke-width:2.22226;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:8"
                                        id="rect10347-1"
                                        width="2"
                                        height="2"
                                        x="14.130877"
                                        y="3.3010411"
                                        rx="0"/>
                                    <rect
                                        style="fill:none;fill-opacity:0.694779;stroke-width:2.22226;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:8"
                                        id="rect10347-4-4"
                                        width="2"
                                        height="2"
                                        x="5.7066164"
                                        y="11.725301"
                                        rx="0"/>
                                    <rect
                                        style="fill:none;fill-opacity:0.694779;stroke-width:2.22226;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:8"
                                        id="rect10347-8-0"
                                        width="2"
                                        height="2"
                                        x="14.130877"
                                        y="20.149561"
                                        rx="0"/>
                                </g>
                            </svg>
                            <t-input-check-box
                                v-model="activeHeaders"
                                :input-value="item.key"
                                class="inline-block select-none"
                                :label="item.label ?? item.key"
                                multipleOption
                            />
                        </div>
                    </div>
                </div>
            </template>
            <template #footer-left>
                <div class="inline-flex whitespace-nowrap items-center space-x-2">
                    <span v-text="t('itemsCountPerPage')"/>
                    <t-input-select
                        v-model.number="searchObj.perPage"
                        :options="dynamicPerPageRange"
                        :clear-button="false"
                        place-holder="t('itemsCountPerPage')"
                    />
                </div>
            </template>
        </t-modal>
    </teleport>
</template>

<script>
import { router } from '@inertiajs/vue3'
import {computed, defineComponent, reactive, toRefs, watch, ref, onBeforeMount, useSlots} from "vue";
import {debouncedWatch} from "@vueuse/core";
import TButton from "@/Components/Button/TButton.vue";
import TModal from "@/Components/Modal/TModal.vue";
import TInputCheckBox from "@/Components/Form/Inputs/TInputCheckBox.vue";
import TInputSelect from "@/Components/Form/Inputs/TInputSelect.vue";
import TDropdown from "@/Components/Dropdown/TDropdown.vue";
import TList from "@/Components/List/TList.vue";
import TListItem from "@/Components/List/TListItem.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";

import {useI18n} from "vue-i18n";
import table_en from "@/Lang/en/table_lang";
import table_tr from "@/Lang/tr/table_lang";
import _ from "lodash";
import TInputBetween from "@/Components/Form/Inputs/TInputBetween.vue";
import TPaginate from "@/Components/Paginate/TPaginate.vue";
import TAlert from "@/Components/Alert/TAlert.vue";

export default defineComponent({
    name: "TBackEndTable",
    components: {
        TAlert,
        TPaginate,
        TInputBetween,
        TInputText,
        TInputGroup,
        TListItem,
        TList,
        TDropdown,
        TInputSelect,
        TInputCheckBox,
        TModal,
        TButton,
    },
    props: {
        header: {
            type: Array,
            default() {
                return [];
            }
        },
        content: {
            type: Object,
            default() {
                return {};
            }
        },
        perPage: {
            type: Number,
            default: 5
        },
        design: {
            type: String,
            default: "elegant"
        },
        requestSearchKey: {
            type: String,
            default: 'searchObj'
        },
        uniqueId: {
            type: String,
            default: "id"
        },
        rowBorder: {
            type: Boolean,
            default: true
        },
        rowZebra: {
            type: Boolean,
            default: true
        },
        rowHover: {
            type: Boolean,
            default: true
        },
        radius: {
            type: Number,
            default: 3
        },
        searchRoute: {
            type: String,
            default: ''
        },
        contentKey: {
            type: String,
            default: ''
        },
        showPagination: {
            type: Boolean,
            default: true
        },
        paginationDetail: {
            type: Boolean,
            default: false
        },
        paginationDetailText: {
            type: String,
            default: 'detailText'
        },
        paginationRange: {
            type: Number,
            default: 5
        },
        paginationJump: {
            type: Boolean,
            default: true
        },
        paginationShowArrowText: {
            type: Boolean,
            default: true
        },
        paginationPreviousText: {
            type: String,
            default: 'previous'
        },
        paginationNextText: {
            type: String,
            default: 'next'
        },
        paginationDetailReverse: {
            type: Boolean,
            default: false
        },
        actions: {
            type: Array,
            default() {
                return ['view']
            }
        },
        actionsHeaderText: {
            type: String,
            default: 'actions'
        },
        actionsModal: {
            type: Array,
            default() {
                return ['delete']
            }
        }
    },
    emits: ['selectedItem'],
    setup(props, {slots, emit}) {
        /*Props*/
        const {
            header,
            content,
            perPage,
            radius,
            searchRoute,
            contentKey,
            actions,
            uniqueId,
            requestSearchKey
        } = toRefs(props);


        /*Multi-language Support*/
        const {t} = useI18n({
            messages: {
                en: table_en,
                tr: table_tr
            }
        });


        /*Generating Style Classes*/
        const contentCellStyle = (itemIndex, cellIndex) => {
            let style = [];

            if (regeneratedContent.value.length > 1) {
                if (itemIndex === 1 && cellIndex === 1) {
                    /*Top Left*/
                    style.push('radius-tl-' + radius.value)
                } else if (itemIndex === 1 && cellIndex === regeneratedHeader.value.length && actions.value.length === 0) {
                    /*Top Right*/
                    style.push('radius-tr-' + radius.value)
                } else if (itemIndex === regeneratedContent.value.length && cellIndex === 1) {
                    /*Bottom Left*/
                    style.push('radius-bl-' + radius.value)
                } else if (itemIndex === regeneratedContent.value.length && cellIndex === regeneratedHeader.value.length && actions.value.length === 0) {
                    /*Bottom Right*/
                    style.push('radius-br-' + radius.value)
                }
            } else {
                if (cellIndex === 1) {
                    /*Left*/
                    style.push('radius-l-' + radius.value)
                } else if (cellIndex === regeneratedHeader.value.length && actions.value.length === 0) {
                    /*Right*/
                    style.push('radius-r-' + radius.value)
                }


            }

            return style;
        };

        const actionsCellStyle = (itemIndex) => {
            let style = [];
            if (regeneratedContent.value.length > 1) {
                if (itemIndex === 1) {
                    style.push("radius-tr-" + radius.value)
                } else if (itemIndex === regeneratedContent.value.length) {
                    style.push("radius-br-" + radius.value)
                }
            } else {
                style.push("radius-r-" + radius.value);
            }

            return style;
        };


        /*Customize Table Columns/Rows*/
        const showCustomizeModal = ref(false);
        const activeHeaders = reactive([]);
        const startDrag = (event, type, index) => {
            event.dataTransfer.dropEffect = "move";
            event.dataTransfer.effectAllowed = "move";
            event.dataTransfer.setData("oldIndex", index);
            event.target.style.opacity = 1;
        };
        const onDrop = (event, item, index) => {
            const oldIndex = event.dataTransfer.getData("oldIndex");
            let cachedItem = header.value[oldIndex];

            startDrag(event, item, index);
            header.value[oldIndex] = header.value[index];
            header.value[index] = cachedItem;
        };
        const onDragOver = (event) => {
            event.target.style.opacity = .3;
        };
        const onDragLeave = (event) => {
            event.target.style.opacity = "1";
        };


        /*Regenerated Table Content*/
        const regeneratedHeader = computed(() => {
            let newHeader = [...header.value];
            return newHeader.filter(i => activeHeaders.includes(i.key));
        });

        const regeneratedContent = computed(() => {
            let newContent = [...content.value["data"]];
            return newContent.map(item => {
                let row = {};
                activeHeaders.forEach(key => {
                    row[key] = item[key];
                });
                row[uniqueId.value] = item[uniqueId.value];
                return row;
            });
        });


        /*Calculate Items in Per Page Select Data*/
        const dynamicPerPageRange = computed(() => {
            let rowCounts = [5, 15, 25, 50, 75, 100];
            let list = [];
            rowCounts.forEach(item => {
                if (content.value['total'] ? content.value['total'] : content.value['meta'].total > item) {
                    list.push({key: item, label: item});
                }
            });
            return list;
        });


        /*Active Page*/

        /**Active Page State**/
        const activePage = ref(1);

        /**Watch Active Page**/
        watch(activePage, () => {
            router.reload({
                    data: {
                        page: activePage.value
                    },
                    only: [contentKey.value]
                }
            );
        });


        /*Search*/

        /**Searching Simple States**/
        const dataLoading = ref(false);
        const showAdvancedSearchPanel = ref(false);

        /**Create Search States**/
        const simpleSearchableFields = reactive([]);
        const advancedSearchableFields = reactive([]);
        const sortableFields = reactive([]);
        const searchObj = reactive({
            searchType: "simple",
            simpleSearchText: "",
            perPage: perPage.value,
            sortKey: null,
            sortDirection: false,
            advancedSearchFields: {}
        });

        onBeforeMount(() => {
            /*Generate Showing Fields Array*/
            header.value.forEach(item => {
                if (item.status) {
                    activeHeaders.push(item["key"]);
                }
            });
            /*Generate Sortable Key Array*/
            header.value.forEach(item => {
                if (item.sortable) {
                    sortableFields.push(item["key"]);
                }
            });
            /*Generate Simple Searchable Key Array*/
            header.value.forEach(item => {
                if (item.simpleSearchable) {
                    simpleSearchableFields.push(item["key"]);
                }
            });
            /*Generate Advanced Searchable Key Array*/
            header.value.forEach(item => {
                if (item.advancedSearchable) {
                    advancedSearchableFields.push({
                        ...item,
                        searchKey: item.advancedSearchKey ? item.advancedSearchKey : item.key
                    });
                }
            });
            /*Generate Advanced Search Query*/
            advancedSearchableFields.forEach(item => {
                searchObj.advancedSearchFields[item.searchKey] = {
                    value: item.advancedSearchInputType === 'between' ? {from: null, to: null} : null,
                    condition: item['compareOperators'] ? item['compareOperators'].length > 0 ? item['compareOperators'][0].key : null : null
                }
            })
        });

        /**Search Post Function**/
        debouncedWatch(() => _.cloneDeep(searchObj), () => {
                router.post(route(searchRoute.value),
                    {
                        [requestSearchKey.value]: {
                            perPage: Number(searchObj.perPage),
                            sortKey: searchObj.sortKey,
                            sortDirection: searchObj.sortDirection,
                            searchType: searchObj.searchType,
                            searchValue: searchObj.searchType === 'simple' ?
                                {
                                    simpleSearchText: searchObj.simpleSearchText,
                                    simpleSearchFields: simpleSearchableFields,
                                } :
                                searchObj.advancedSearchFields

                        }
                    },
                    {
                        only: [contentKey.value],
                        onBefore: visit => {
                            dataLoading.value = true;
                        },
                        onFinish: visit => {
                            dataLoading.value = false;

                        },
                    });
            },
            {debounce: 500}
        );

        /**Watch Search Type**/
        watch(showAdvancedSearchPanel, () => {
            showAdvancedSearchPanel.value ? searchObj.searchType = 'advanced' : searchObj.searchType = 'simple'
        })


        /*Content Delete Confirm Modal Function*/
        const selectedItem = ref(null);
        const selectItem = ($event, item, type) => {
            emit('selectedItem', {
                data: content.value.data.find(i => i[uniqueId.value] === item[uniqueId.value]),
                action: type
            });
        }

        /*Error Management*/
        const tableErrors = computed(() => {
            let contentStatus = !Object.keys(content.value);
            let headerStatus = header.value.length === 0;
            let contentKeyStatus = !contentKey.value;
            let searchRouteStatus = !searchRoute.value;

            return [
                {status: contentStatus, title: 'Content', errorText: 'contentError'},
                {status: headerStatus, title: 'Header', errorText: 'headerError'},
                {status: contentKeyStatus, title: 'Content Key', errorText: 'contentKeyError'},
                {status: searchRouteStatus, title: 'Search Route', errorText: 'searchRouteError'}
            ]
        })


        /*Slot Check*/
        const hasSlot = name => !!useSlots()[name];


        return {
            dataLoading,
            hasSlot,
            contentCellStyle,
            actionsCellStyle,
            dynamicPerPageRange,
            showCustomizeModal,
            activePage,
            activeHeaders,
            regeneratedHeader,
            regeneratedContent,
            startDrag,
            onDrop,
            onDragLeave,
            onDragOver,
            sortableFields,
            simpleSearchableFields,
            advancedSearchableFields,
            selectedItem,
            selectItem,
            showAdvancedSearchPanel,
            searchObj,
            tableErrors,
            t
        };
    }
})
;
</script>

<style scoped>
.tableSearch-enter-active, .tableSearch-leave-active {
    transition: all 700ms;
}

.tableSearch-enter-from, .tableSearch-leave-to {
    opacity: 0;
    max-height: 0;
}

.tableSearch-enter-to, .tableSearch-leave-from {
    opacity: 1;
    max-height: 500px;
}

/*Fade Transition*/
.fade-enter-active, .fade-leave-active {
    transition: all 300ms ease-in-out;
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
    transform: scale(.9);
}

.fade-enter-to, .fade-leave-from {
    opacity: 1;
    transform: scale(1);
}
</style>


================================================
FILE: resources/js/Components/Table/TTable.vue
================================================
<template>
    <div
        class="table-outside-container"
        :class="`table-${features.table.design}`"
    >
        <!--Top Content-->
        <div
            v-if="hasSlot('search') || hasSlot('top-right') || hasSlot('top-left') || simpleSearchableFields.length>0"
            class="table-top"
        >
            <!--Left-->
            <div
                v-if="simpleSearchableFields.length>0"
                class="table-top-left"
            >
                <!--Search-->
                <t-input-text
                    id="search"
                    type="text"
                    v-model="search"
                    :radius="features.table.radius"
                    :placeholder="t('searchPlaceHolder')"
                >
                    <template #icon>
                        <!--Search Icon-->
                        <svg
                            class="w-6 h-6"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                            />
                        </svg>
                    </template>
                </t-input-text>
                <!--Customize Showing Options-->
                <t-button
                    :radius="features.table.radius"
                    border
                    @click="showCustomizeModal = !showCustomizeModal"
                >
                    <!--Options Icon-->
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
                        />
                    </svg>
                </t-button>
                <!--Advanced Search Button-->
                <t-button
                    v-if="hasSlot('search')"
                    :radius="features.table.radius"
                    border
                    @click="showAdvancedSearchPanel = !showAdvancedSearchPanel"
                >
                    <!--Advanced Search Icon-->
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
                        />
                    </svg>
                </t-button>
                <!--Custom Top Left Content-->
                <slot name="top-left"/>
            </div>
            <!--Right-->
            <div
                v-if="hasSlot('top-right')"
                class="table-top-right"
            >
                <!--Custom Top Right Content-->
                <slot name="top-right"/>
            </div>
        </div>
        <!--Advanced Filters Area-->
        <transition name="tableSearch">
            <div
                v-if="hasSlot('search') && showAdvancedSearchPanel"
            >
                <div
                    class="table-advanced-search-container"
                    :class="`radius-${features.table.radius}`"
                >
                    <span id="title" v-text="t('advancedSearch')"/>
                    <slot name="search"/>
                </div>
            </div>
        </transition>
        <!--Table-->
        <div class="overflow-x-auto scrollbar scrollbar-thin">
            <table class="table-container">
                <!--Header-->
                <thead>
                <!--Header Row-->
                <tr>
                    <!--Header Items-->
                    <th
                        v-for="item in regeneratedHeader"
                        :key="item.key"
                        :style="{width: item.width ? item.width+'%' : 'auto'}"
                    >
                        <div
                            :class="[
                                'table-header-cell',
                                {'cursor-pointer' : sortableFields.includes(item.key)}  ,
                                item.align === 'right' ? 'justify-end' :
                                item.align === 'center' ? 'justify-center' :
                                'justify-start'
                                ]"
                            @click="
                            sortableFields.includes(item.key) ?
                            [sort.key = item.key, sort.trigger=!sort.trigger] :
                            ''"
                        >
                            <!--Label-->
                            <span v-text="item.label ?? item.key"/>
                            <!--Sort Icon-->
                            <span v-show="sortableFields.includes(item.key)">
                                <transition name="fade" mode="out-in">
                  <!--Sort Direction Icon-->
                  <svg
                      v-if="sort.key === item.key"
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-5 w-5"
                      :class="[
                          'transform ',
                          sort.direction === 'desc' ? 'rotate-180' : '',
                          'transition-size-short'
                          ]"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                  >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6"
                    />
                  </svg>
                                    <!--Sort Placeholder Icon-->
                  <svg
                      v-else
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-5 w-5 opacity-50"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                  >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M8 9l4-4 4 4m0 6l-4 4-4-4"
                    />
                  </svg>
                </transition>
                            </span>
                        </div>
                    </th>
                </tr>
                </thead>
                <!--Content-->
                <tbody>
                <!--Content Row-->
                <tr
                    v-for="(item,itemIndex) in regeneratedContent"
                    :key="itemIndex"
                    class="table-content-row"
                    :class="[
                        {'table-content-zebra-row': features.table.zebraRow},
                        {'table-content-hover-row': features.table.hoverRow},
                        {'table-content-border-row': features.table.borderRow},
                        ]"
                >
                    <!--Cells of The Content Row-->
                    <td
                        v-for="(cell,cellKey,cellIndex) in item"
                        :key="cellKey"
                        :class="contentCellStyle(itemIndex,cellIndex)"
                    >
                        <div
                            :class="[
                                'flex',
                                regeneratedHeader.find(h=>h.key === cellKey).align === 'right' ? 'justify-end' :
                                regeneratedHeader.find(h=>h.key === cellKey).align === 'center' ? 'justify-center' :
                                'justify-start'
                                ]"
                        >
                            <!--Raw Content-->
                            <span v-if="!hasSlot(cellKey)" v-text="cell"/>
                            <!--SlotScope Content-->
                            <slot
                                v-else
                                :name="cellKey"
                                :props="item"
                            />
                        </div>
                    </td>
                </tr>
                <!--Empty Content Notification-->
                <tr v-if="regeneratedContent.length === 0">
                    <td :colspan="regeneratedHeader.length">
                        <div
                            class="table-no-content"
                            :class="`radius-${features.table.radius}`"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <span v-text="t('anyContentMessage')"/>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>

            <!--Paginator-->
            <div
                v-if="filteredContent.length > perPageItem"
                 class="flex py-4 justify-center"
            >
                <t-paginate
                    v-model="activePage"
                    :jump="features.pagination.jump"
                    :range="5"
                    :total="filteredContent.length"
                    :radius="features.table.radius"
                    :per-page-item="perPageItem"
                    :previous-text="features.pagination.previousText"
                    :next-text="features.pagination.nextText"
                    :detail="features.pagination.detail"
                    :detail-text="features.pagination.detailText"
                />
            </div>
        </div>
    </div>


    <!--Modals-->
    <teleport to="body">
        <!--Header Fields/Per-page Item Customize Modal-->
        <t-modal
            v-model="showCustomizeModal"
            :title="t('optionsModalTitle')"
            design="elegant"
        >
            <template #content>
                <div class="flex flex-col text-left">
                    <h4 class="font-bold text-sm" v-text="t('optionsModalColumnOrder')"/>
                    <div class="flex flex-col max-w-min mt-4">
                        <div
                            v-for="(item, itemIndex) in header"
                            :key="item.key"
                            @drop="onDrop($event,'new',itemIndex)"
                            @dragenter.prevent
                            @dragover.prevent
                            @dragstart="startDrag($event,'old',itemIndex)"
                            @dragleave="onDragLeave($event)"
                            @dragover="onDragOver($event)"
                            :draggable="true"
                            class="relative inline-flex items-center space-x-1 px-2 py-1"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 cursor-move" fill="none"
                                 viewBox="0 0 24 24"
                                 stroke="currentColor">
                                <g
                                    id="g10617"
                                    transform="translate(1.0812535,-0.72530103)">
                                    <rect
                                        style="fill:none;fill-opacity:0.694779;stroke-width:2.22226;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:8"
                                        id="rect10347"
                                        width="2"
                                        height="2"
                                        x="14.130877"
                                        y="11.725301"
                                        rx="0"/>
                                    <rect
                                        style="fill:none;fill-opacity:0.694779;stroke-width:2.22226;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:8"
                                        id="rect10347-4"
                                        width="2"
                                        height="2"
                                        x="5.7066164"
                                        y="20.149561"
                                        rx="0"/>
                                    <rect
                                        style="fill:none;fill-opacity:0.694779;stroke-width:2.22226;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:8"
                                        id="rect10347-8"
                                        width="2"
                                        height="2"
                                        x="5.7066164"
                                        y="3.3010411"
                                        rx="0"/>
                                    <rect
                                        style="fill:none;fill-opacity:0.694779;stroke-width:2.22226;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:8"
                                        id="rect10347-1"
                                        width="2"
                                        height="2"
                                        x="14.130877"
                                        y="3.3010411"
                                        rx="0"/>
                                    <rect
                                        style="fill:none;fill-opacity:0.694779;stroke-width:2.22226;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:8"
                                        id="rect10347-4-4"
                                        width="2"
                                        height="2"
                                        x="5.7066164"
                                        y="11.725301"
                                        rx="0"/>
                                    <rect
                                        style="fill:none;fill-opacity:0.694779;stroke-width:2.22226;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:8"
                                        id="rect10347-8-0"
                                        width="2"
                                        height="2"
                                        x="14.130877"
                                        y="20.149561"
                                        rx="0"/>
                                </g>
                            </svg>

                            <t-input-check-box
                                v-model="activeHeaders"
                                :input-value="item.key"
                                class="inline-block select-none"
                                :label="item.label ?? item.key"
                                multipleOption
                            />
                        </div>
                    </div>
                </div>
            </template>
            <template #footer-left>

                <div class="inline-flex whitespace-nowrap items-center space-x-2">
                    <span v-text="t('itemsCountPerPage')"/>
                    <t-input-select
                        v-model.number="perPageItem"
                        :options="dynamicPerPageItemRange"
                        :clear-button="false"
                        place-holder="t('itemsCountPerPage')"
                    />
                </div>
            </template>
        </t-modal>
    </teleport>
</template>

<script>
import {computed, defineComponent, onBeforeMount, reactive, ref, toRefs, watch, useSlots} from "vue";
import TPaginate from "@/Components/Paginate/TPaginate.vue";
import TButton from "@/Components/Button/TButton.vue";
import TModal from "@/Components/Modal/TModal.vue";
import TInputSelect from "@/Components/Form/Inputs/TInputSelect.vue";
import TInputCheckBox from "@/Components/Form/Inputs/TInputCheckBox.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import _ from "lodash";
import {useI18n} from "vue-i18n";
import table_en from "@/Lang/en/table_lang";
import table_tr from "@/Lang/tr/table_lang";

export default defineComponent({
    name: "TTable",
    components: {
        TInputText,
        TInputCheckBox,
        TInputSelect,
        TModal,
        TButton,
        TPaginate
    },
    props: {
        features: {
            type: Object,
            default() {
                return {
                    table: {
                        design: "filled",
                        seperatedRow: false,
                        rowBorder: true,
                        zebraRow: true,
                        radius: 3,
                        uniqueIdKey: "id",
                        perPage: 5
                    },
                    pagination: {
                        status: true,
                        range: 5,
                        jump: true,
                        radius: 3,
                        arrowText: true,
                        reverse: false,
                        detail: true,
                    },
                    actions: {
                        status: true,
                        headerText: "Actions"
                    }
                };
            }
        },
        header: {
            type: Array,
            default() {
                return [];
            }
        },
        content: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    setup(props, {slots}) {
        const {header, content, features} = toRefs(props);
        const search = ref("");
        const activeHeaders = reactive([]);
        const sortableFields = reactive([]);
        const simpleSearchableFields = reactive([]);
        const showAdvancedSearchPanel = ref(false);
        const showCustomizeModal = ref(false);
        const activePage = ref(1);
        const perPageItem = ref(features.value['table'].perPage);
        const {t} = useI18n({
            messages: {
                en: table_en,
                tr: table_tr
            }
        });

        /*Generate Arrays from Header*/
        onBeforeMount(() => {
            /*Generate Showing Fields Array*/
            header.value.forEach(item => {
                if (item.status) {
                    activeHeaders.push(item["key"]);
                }
            });
            /*Generate Sortable Key Array*/
            header.value.forEach(item => {
                if (item.sortable) {
                    sortableFields.push(item["key"]);
                }
            });
            /*Generate Searchable Key Array*/
            header.value.forEach(item => {
                if (item.simpleSearchable) {
                    simpleSearchableFields.push(item["key"]);
                }
            });
        });

        const startDrag = (event, type, index) => {
            event.dataTransfer.dropEffect = "move";
            event.dataTransfer.effectAllowed = "move";
            event.dataTransfer.setData("oldIndex", index);
            event.target.style.opacity = 1;
        };
        const onDrop = (event, item, index) => {
            const oldIndex = event.dataTransfer.getData("oldIndex");
            let cachedItem = header.value[oldIndex];

            startDrag(event, item, index);
            header.value[oldIndex] = header.value[index];
            header.value[index] = cachedItem;
        };
        const onDragOver = (event) => {
            event.target.style.opacity = .3;
        };
        const onDragLeave = (event) => {
            event.target.style.opacity = "1";
        };

        /*Regenerated Table Content*/
        const regeneratedHeader = computed(() => {
            let newHeader = [...header.value];
            return newHeader.filter(i => activeHeaders.includes(i.key));
        });
        const regeneratedContent = computed(() => {
            let newContent = [...paginatedContent.value];
            return newContent.map(item => {
                let row = {};
                activeHeaders.forEach(key => {
                    row[key] = item[key];
                });
                return row;
            });
        });

        /*Generating Style Classes*/
        const contentCellStyle = (itemIndex, cellIndex) => {
            let style;
            let diffOperator;
            if (perPageItem.value > regeneratedContent.value.length) {
                diffOperator = regeneratedContent.value.length
            } else {
                diffOperator = perPageItem.value
            }
            style = "table-content-cell" + " " +
                ((itemIndex === 0) && (cellIndex === 0) ? "radius-tl-" + features.value["table"].radius :
                    (itemIndex === 0) && (cellIndex === regeneratedHeader.value.length - 1) ? "radius-tr-" + features.value["table"].radius :
                        (itemIndex + 1 === diffOperator) && (cellIndex === 0) ? "radius-bl-" + features.value["table"].radius :
                            (itemIndex + 1 === diffOperator) && (cellIndex === regeneratedHeader.value.length - 1) ? "radius-br-" + features.value["table"].radius : "");
            return style;
        };

        /*Calculate Items in Per Page Select Data*/
        const dynamicPerPageItemRange = computed(() => {
            let rowCounts = [5, 15, 25, 50, 75, 100];
            let list = [];
            rowCounts.forEach(item => {
                if (content.value.length > item) {
                    list.push({key: item, label: item});
                }
            });
            return list;
        });

        /*Generate Filtered Data*/
        const paginatedContent = computed(() => {
            return sortedContent.value.slice((activePage.value - 1) * perPageItem.value, perPageItem.value * activePage.value);
        });

        const filteredContent = computed(() => {
            if (header.value.filter(h => h.simpleSearchable === true).length > 0) {
                return content.value.filter((item) => {
                    let query;
                    header.value.filter(h => h.simpleSearchable === true).forEach(i => {
                        query = item[i.key].toLowerCase().includes(search.value.toLowerCase()) || query;
                    });

                    return query;
                });
            } else {
                return content.value;
            }

        });

        const sortedContent = computed(() => {
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            return filteredContent.value.sort((a, b) => {
                if (a[sort.key] < b[sort.key]) {
                    return sort.direction === 'asc' ? -1 : 1;
                } else if (a[sort.key] > b[sort.key]) {
                    return sort.direction === 'asc' ? 1 : -1;
                } else {
                    return 0
                }
            })
        })

        const sort = reactive({
            trigger: true,
            key: '',
            direction: 'desc'
        })

        watch(() => _.cloneDeep(sort), (newValue, oldValue) => {
            if (newValue.key === oldValue.key) {
                if (sort.direction === 'asc') {
                    sort.direction = 'desc'
                } else {
                    sort.direction = 'asc'
                }
            }
        }, {
            deep: true
        })

        const hasSlot = name => !!useSlots()[name];
        return {
            hasSlot,
            onDrop,
            onDragLeave,
            onDragOver,
            startDrag,
            contentCellStyle,
            sort,
            sortableFields,
            dynamicPerPageItemRange,
            regeneratedHeader,
            regeneratedContent,
            search,
            simpleSearchableFields,
            activeHeaders,
            showAdvancedSearchPanel,
            showCustomizeModal,
            activePage,
            paginatedContent,
            filteredContent,
            t,
            perPageItem
        };
    }
});
</script>

<style scoped>
.tableSearch-enter-active, .tableSearch-leave-active {
    transition: all 700ms;
}

.tableSearch-enter-from, .tableSearch-leave-to {
    opacity: 0;
    max-height: 0;
}

.tableSearch-enter-to, .tableSearch-leave-from {
    opacity: 1;
    max-height: 500px;
}

/*Fade Transition*/
.fade-enter-active, .fade-leave-active {
    transition: all 300ms ease-in-out;
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
    transform: scale(.9);
}

.fade-enter-to, .fade-leave-from {
    opacity: 1;
    transform: scale(1);
}
</style>


================================================
FILE: resources/js/Components/Table/TTableActionDropdown.vue
================================================
<template>
    <div class="relative select-none">
        <!--Trigger-->
        <t-dots-vertical-icon class="w-6 h-6 cursor-pointer" @click="showPanel = !showPanel"/>
        <transition name="fade">
            <div v-if="showPanel" class="absolute -top-1 -left-24 -ml-2 overflow-hidden">
                <ul class="flex flex-row gap-2 p-1 border border-gray-500 bg-gray-100 bg-opacity-90 rounded-md">
                    <!--Show-->
                    <li class="border-r border-gray-500 pr-2 cursor-pointer" @click="clickedButton('show')">
                        <t-eye-icon class="w-5 h-5 hover:text-blue-500"/>
                    </li>
                    <!--Edit-->
                    <li class="border-r border-gray-500 pr-2 cursor-pointer" @click="clickedButton('edit')">
                        <t-pencil-alt-icon class="w-5 h-5 hover:text-yellow-600"/>
                    </li>
                    <!--Delete-->
                    <li class=" cursor-pointer" @click="clickedButton('delete')">
                        <t-trash-icon class="w-5 h-5 hover:text-red-600"/>
                    </li>
                </ul>
            </div>
        </transition>
    </div>
</template>

<script>
import {defineComponent} from "vue";
import TDotsVerticalIcon from "@/Components/Icon/TDotsVerticalIcon.vue";
import TEyeIcon from "@/Components/Icon/TEyeIcon.vue";
import TPencilAltIcon from "@/Components/Icon/TPencilAltIcon.vue";
import TTrashIcon from "@/Components/Icon/TTrashIcon.vue";

export default defineComponent({
    name: "TTableActionDropdown",
    components: {TTrashIcon, TPencilAltIcon, TEyeIcon, TDotsVerticalIcon},
    props: {
        showAction: {
            type: Object,
            default(){
                return {}
            }
        },
        editAction: {
            type: Object,
            default(){
                return {}
            }
        },
        deleteAction: {
            type: Object,
            default(){
                return {}
            }
        }
    },
    emits: ['action'],
    data(){
        return{
            showPanel: false
        }
    },
    methods: {
        clickedButton(button){
                this.$emit('action', button)
        }
    }
})
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
    transition: all .4s ease;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
}

.fade-enter-to, .fade-leave {
    opacity: 1;
}
</style>


================================================
FILE: resources/js/Components/Toastr/TToastr.vue
================================================
<template>
  <transition name="fade">
    <div v-if="showAlertBox"
         :class="[
             'toastr',
             calculatedToastrStyle,
             ]">
      <div class="flex px-1 items-center justify-start gap-2">
        <slot name="icon"></slot>
        <div class="flex flex-wrap items-center whitespace-normal flex-shrink-0">
          <slot></slot>
        </div>
      </div>
      <div v-if="closeable" :class="['toastr-close', closeIconColors[color]]" @click="close">
        <t-x-circle-icon class="w-5 h-5 text-white"/>
      </div>
    </div>
  </transition>
</template>

<script>
import {defineComponent} from "vue";
import {toastrStyleMixin} from "@/Mixins/Styles/toastrStyleMixin";
import TXCircleIcon from "@/Components/Icon/TXCircleIcon.vue";

export default defineComponent({
  name: "TToastr",
  components: {TXCircleIcon},
  mixins: [toastrStyleMixin],
  props: {
    id: {
      type: String
    },
    closeable: {
      type: Boolean,
      required: false,
      default: false
    },
    timer: {
      type: Number,
      required: false
    },
  },
  data() {
    return {
      showAlertBox: true,
    }
  },
  created() {
    if (this.timer) {
      setTimeout(() => {
        this.showAlertBox = false;
        this.$emit('destroy', this.id)
      }, this.timer)
    }
  },
  methods: {
    close() {
      this.showAlertBox = false;
      this.$emit('destroy', this.id)
    }
  },
})
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: all ease-out .75s;
}

.fade-enter {
  opacity: 0;
  max-width: 0;
}

.fade-enter-to {
  opacity: 1;
  max-width: 100%;
}

.fade-leave {
  opacity: 1;
  max-width: 100%;
}

.fade-leave-to {
  opacity: 0;
  max-width: 0;
}
</style>


================================================
FILE: resources/js/Components/Tooltip/TTooltip.vue
================================================
<template>
    <!--Main Content-->
    <div class="tooltip">
        <div
            class="tooltip-container"
            :class="[
                {'tooltip-border' : border},
                {'tooltip-bold' : bold}
            ]"
            @click="showPopover = !showPopover"
            ref="tooltipItem"
        >
            <slot/>
            <!--Second Content Container-->
            <div
                ref="box"
                :style="{visibility: showPopover ? 'visible': 'hidden'}"
                class="tooltip-box"
                :class="[
                    `tooltip-${color}`,
                    `tooltip-${activePosition}-container`
                ]"
            >
                <!--Arrow-->
                <div
                    class="tooltip-arrow"
                    :class="[
                        `tooltip-${activePosition}-arrow`,
                        hasSlot('boxTitle')
                    ]"
                ></div>
                <!--Content-->
                <div
                    class="tooltip-box-content"
                    :class="(hasSlot('boxTitle') ? 'rounded-b-md' : 'rounded-md')"
                >
                    <slot name="boxContent"></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {computed, defineComponent, useSlots, ref, toRefs, watch} from "vue";
import {onClickOutside} from "@vueuse/core";

export default defineComponent({
    name: "TTooltip",
    props: {
        position: {
            type: String,
            default: "bottom"
        },
        color: {
            type: String,
            default: "white"
        },
        border: {
            type: Boolean,
            default: true
        },
        bold: {
            type: Boolean,
            default: true
        },
    },
    setup(props, {slots}) {
        /*Definitions*/
        const {position} = toRefs(props);
        const showPopover = ref(false);
        const activePosition = ref(position.value);
        const tooltipItem = ref(null);
        const box = ref(null);

        /*Open-Close Actions*/
        const updateStatus = () => {
            let tooltipPosition = box.value.getBoundingClientRect();
            let windowInnerWidth = window.innerWidth;

            if (position.value !== 'top' && position.value !== 'bottom') {
                /*If it's outside of the left*/
                if (tooltipPosition.width > tooltipPosition.left && position.value === 'left') {
                    activePosition.value = "right";
                }

                /*If it's outside of the right*/
                if (tooltipPosition.right > windowInnerWidth) {
                    activePosition.value = "left";
                }
            } else {

                /*If it's outside of the right*/
                if (tooltipPosition.right > windowInnerWidth && windowInnerWidth > tooltipPosition.left) {
                    Object.assign(box.value.style, {
                        position: 'absolute',
                        left: `-${Number(tooltipPosition.right) - Number(windowInnerWidth) + 20}px`
                    })
                }
            }
        };
        watch(showPopover, () => {
            updateStatus()
        })
        onClickOutside(tooltipItem, () => showPopover.value = false);

        /*Slot Check*/
        const hasSlot = name => !!useSlots()[name];

        return {
            tooltipItem,
            box,
            showPopover,
            updateStatus,
            hasSlot,
            activePosition
        };
    }
});
</script>


================================================
FILE: resources/js/Functions/deviceInfoCollector.js
================================================
import {defineAsyncComponent} from "vue";


const breakpoints = useBreakpoints(breakpointsTailwind)

function width() {
    defineAsyncComponent(() => import('@vueuse/core'))
}

export {breakpoints}


================================================
FILE: resources/js/Functions/menuTrigger.js
================================================
import {breakpointsTailwind, useBreakpoints, useStorage} from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)
const menuStatus = useStorage('menuStatus');

function updateMenuStatus(){
        if (breakpoints.smaller('sm')) {
            /*Set status in mobile devices*/
            if (menuStatus.value === 'hidden') {
                menuStatus.value = 'opened'
            } else {
                menuStatus.value = 'hidden'
            }
        } else {
            /*Set status in pc*/
            if (menuStatus.value === 'opened') {
                menuStatus.value = 'closed'
            } else {
                menuStatus.value = 'opened'
            }
        }
}

export {updateMenuStatus, menuStatus}


================================================
FILE: resources/js/Functions/windowSizeCalculator.js
================================================
import { computed, onBeforeMount, onUnmounted, ref, watch } from "vue";

export default function () {
    /*Definitions*/
    const windowWidth = ref();
    const deviceType = ref();
    const onResize = () => {
        windowWidth.value = window.innerWidth;
    };

    /*Register Event Listener*/
    onBeforeMount(() => {
        deviceTypeCalculate();
        window.addEventListener("resize", onResize);
        onResize();
    });


    const deviceTypeCalculate = () => {
        if (windowWidth.value <= 640) {
            deviceType.value = "phone";
        } else if (windowWidth.value <= 768) {
            deviceType.value = "tablet";
        } else if (windowWidth.value <= 1024) {
            deviceType.value = "laptop";
        } else {
            deviceType.value = "desktop";
        }
    }


    /*Destroy Event Listener*/
    onUnmounted(() => {
        window.removeEventListener("resize", onResize);
    });

    watch(windowWidth,
        () => {
            deviceTypeCalculate();
        });

    return { deviceType };
}


================================================
FILE: resources/js/Jetstream/ActionMessage.vue
================================================
<script setup>
defineProps({
    on: Boolean,
});
</script>

<template>
    <div>
        <transition leave-active-class="transition ease-in duration-1000" leave-from-class="opacity-100" leave-to-class="opacity-0">
            <div v-show="on" class="text-sm text-gray-600 dark:text-gray-400">
                <slot />
            </div>
        </transition>
    </div>
</template>


================================================
FILE: resources/js/Jetstream/ActionSection.vue
================================================
<script setup>
import SectionTitle from '@/Jetstream/SectionTitle.vue';
</script>

<template>
    <div class="md:grid md:grid-cols-3 md:gap-6">
        <SectionTitle>
            <template #title>
                <slot name="title" />
            </template>
            <template #description>
                <slot name="description" />
            </template>
        </SectionTitle>

        <div class="mt-5 md:mt-0 md:col-span-2">
            <div class="px-4 py-5 sm:p-6 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
                <slot name="content" />
            </div>
        </div>
    </div>
</template>


================================================
FILE: resources/js/Jetstream/ApplicationLogo.vue
================================================
<template>
    <svg viewBox="0 0 317 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M74.09 30.04V13h-4.14v21H82.1v-3.96h-8.01zM95.379 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM106.628 21.58V19h-3.87v15h3.87v-7.17c0-3.15 2.55-4.05 4.56-3.81V18.7c-1.89 0-3.78.84-4.56 2.88zM124.295 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM141.544 19l-3.66 10.5-3.63-10.5h-4.26l5.7 15h4.41l5.7-15h-4.26zM150.354 28.09h11.31c.09-.51.15-1.02.15-1.59 0-4.41-3.15-7.92-7.59-7.92-4.71 0-7.92 3.45-7.92 7.92s3.18 7.92 8.22 7.92c2.88 0 5.13-1.17 6.54-3.21l-3.12-1.8c-.66.87-1.86 1.5-3.36 1.5-2.04 0-3.69-.84-4.23-2.82zm-.06-3c.45-1.92 1.86-3.03 3.93-3.03 1.62 0 3.24.87 3.72 3.03h-7.65zM164.516 34h3.87V12.1h-3.87V34zM185.248 34.36c3.69 0 6.9-2.01 6.9-6.3V13h-2.1v15.06c0 3.03-2.07 4.26-4.8 4.26-2.19 0-3.93-.78-4.62-2.61l-1.77 1.05c1.05 2.43 3.57 3.6 6.39 3.6zM203.124 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM221.224 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM225.176 22.93c0-1.62 1.59-2.37 3.15-2.37 1.44 0 2.97.57 3.6 2.1l1.65-.96c-.87-1.86-2.79-3.06-5.25-3.06-3 0-5.13 1.89-5.13 4.29 0 5.52 8.76 3.39 8.76 7.11 0 1.77-1.68 2.4-3.45 2.4-2.01 0-3.57-.99-4.11-2.52l-1.68.99c.75 1.92 2.79 3.45 5.79 3.45 3.21 0 5.43-1.77 5.43-4.32 0-5.52-8.76-3.39-8.76-7.11zM244.603 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM249.883 21.49V19h-1.98v15h1.98v-8.34c0-3.72 2.34-4.98 4.74-4.98v-1.92c-1.92 0-3.69.63-4.74 2.73zM263.358 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM286.848 19v2.94c-1.26-2.01-3.39-3.3-6.06-3.3-4.23 0-7.74 3.42-7.74 7.86s3.51 7.86 7.74 7.86c2.67 0 4.8-1.29 6.06-3.3V34h1.98V19h-1.98zm-5.91 13.44c-3.33 0-5.91-2.61-5.91-5.94 0-3.33 2.58-5.94 5.91-5.94s5.91 2.61 5.91 5.94c0 3.33-2.58 5.94-5.91 5.94zM309.01 18.64c-1.92 0-3.75.87-4.86 2.73-.84-1.74-2.46-2.73-4.56-2.73-1.8 0-3.42.72-4.59 2.55V19h-1.98v15H295v-8.31c0-3.72 2.16-5.13 4.32-5.13 2.13 0 3.51 1.41 3.51 4.08V34h1.98v-8.31c0-3.72 1.86-5.13 4.17-5.13 2.13 0 3.66 1.41 3.66 4.08V34h1.98v-9.36c0-3.75-2.31-6-5.61-6z" class="fill-black dark:fill-white" />
        <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5" />
        <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5" />
    </svg>
</template>


================================================
FILE: resources/js/Jetstream/ApplicationMark.vue
================================================
<template>
    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5" />
        <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5" />
    </svg>
</template>


================================================
FILE: resources/js/Jetstream/AuthenticationCard.vue
================================================
<template>
    <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
        <div>
            <slot name="logo" />
        </div>

        <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
            <slot />
        </div>
    </div>
</template>


================================================
FILE: resources/js/Jetstream/AuthenticationCardLogo.vue
================================================
<script setup>
import { Link } from '@inertiajs/vue3';
</script>

<template>
    <Link :href="'/'">
        <svg
            class="w-16 h-16"
            viewBox="0 0 48 48"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5" />
            <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5" />
        </svg>
    </Link>
</template>


================================================
FILE: resources/js/Jetstream/Banner.vue
================================================
<script setup>
import { ref, watchEffect } from 'vue';
import { usePage } from '@inertiajs/vue3';

const page = usePage();
const show = ref(true);
const style = ref('success');
const message = ref('');

watchEffect(async () => {
    style.value = page.props.jetstream.flash?.bannerStyle || 'success';
    message.value = page.props.jetstream.flash?.banner || '';
    show.value = true;
});
</script>

<template>
    <div>
        <div v-if="show && message" :class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger' }">
            <div class="max-w-screen-xl mx-auto py-2 px-3 sm:px-6 lg:px-8">
                <div class="flex items-center justify-between flex-wrap">
                    <div class="w-0 flex-1 flex items-center min-w-0">
                        <span class="flex p-2 rounded-lg" :class="{ 'bg-indigo-600': style == 'success', 'bg-red-600': style == 'danger' }">
                            <svg v-if="style == 'success'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>

                            <svg v-if="style == 'danger'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                            </svg>
                        </span>

                        <p class="ms-3 font-medium text-sm text-white truncate">
                            {{ message }}
                        </p>
                    </div>

                    <div class="shrink-0 sm:ms-3">
                        <button
                            type="button"
                            class="-me-1 flex p-2 rounded-md focus:outline-none sm:-me-2 transition"
                            :class="{ 'hover:bg-indigo-600 focus:bg-indigo-600': style == 'success', 'hover:bg-red-600 focus:bg-red-600': style == 'danger' }"
                            aria-label="Dismiss"
                            @click.prevent="show = false"
                        >
                            <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


================================================
FILE: resources/js/Jetstream/Checkbox.vue
================================================
<script setup>
import { computed } from 'vue';

const emit = defineEmits(['update:checked']);

const props = defineProps({
    checked: {
        type: [Array, Boolean],
        default: false,
    },
    value: {
        type: String,
        default: null,
    },
});

const proxyChecked = computed({
    get() {
        return props.checked;
    },

    set(val) {
        emit('update:checked', val);
    },
});
</script>


<template>
    <input
        v-model="proxyChecked"
        type="checkbox"
        :value="value"
        class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800"
    >
</template>


================================================
FILE: resources/js/Jetstream/ConfirmationModal.vue
================================================
<script setup>
import Modal from '@/Jetstream/Modal.vue';

const emit = defineEmits(['close']);

defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    maxWidth: {
        type: String,
        default: '2xl',
    },
    closeable: {
        type: Boolean,
        default: true,
    },
});

const close = () => {
    emit('close');
};
</script>

<template>
    <Modal
        :show="show"
        :max-width="maxWidth"
        :closeable="closeable"
        @close="close"
    >
        <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
                <div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                    <svg class="h-6 w-6 text-red-600 dark:text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                    </svg>
                </div>

                <div class="mt-3 text-center sm:mt-0 sm:ms-4 sm:text-start">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                        <slot name="title" />
                    </h3>

                    <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
                        <slot name="content" />
                    </div>
                </div>
            </div>
        </div>

        <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 dark:bg-gray-800 text-end">
            <slot name="footer" />
        </div>
    </Modal>
</template>


================================================
FILE: resources/js/Jetstream/ConfirmsPassword.vue
================================================
<script setup>
import { ref, reactive, nextTick } from 'vue';
import DialogModal from '@/Jetstream/DialogModal.vue';
import InputError from '@/Jetstream/InputError.vue';
import PrimaryButton from '@/Jetstream/PrimaryButton.vue';
import SecondaryButton from '@/Jetstream/SecondaryButton.vue';
import TextInput from '@/Jetstream/TextInput.vue';

const emit = defineEmits(['confirmed']);

defineProps({
    title: {
        type: String,
        default: 'Confirm Password',
    },
    content: {
        type: String,
        default: 'For your security, please confirm your password to continue.',
    },
    button: {
        type: String,
        default: 'Confirm',
    },
});

const confirmingPassword = ref(false);

const form = reactive({
    password: '',
    error: '',
    processing: false,
});

const passwordInput = ref(null);

const startConfirmingPassword = () => {
    axios.get(route('password.confirmation')).then(response => {
        if (response.data.confirmed) {
            emit('confirmed');
        } else {
            confirmingPassword.value = true;

            setTimeout(() => passwordInput.value.focus(), 250);
        }
    });
};

const confirmPassword = () => {
    form.processing = true;

    axios.post(route('password.confirm'), {
        password: form.password,
    }).then(() => {
        form.processing = false;

        closeModal();
        nextTick().then(() => emit('confirmed'));

    }).catch(error => {
        form.processing = false;
        form.error = error.response.data.errors.password[0];
        passwordInput.value.focus();
    });
};

const closeModal = () => {
    confirmingPassword.value = false;
    form.password = '';
    form.error = '';
};
</script>

<template>
    <span>
        <span @click="startConfirmingPassword">
            <slot />
        </span>

        <DialogModal :show="confirmingPassword" @close="closeModal">
            <template #title>
                {{ title }}
            </template>

            <template #content>
                {{ content }}

                <div class="mt-4">
                    <TextInput
                        ref="passwordInput"
                        v-model="form.password"
                        type="password"
                        class="mt-1 block w-3/4"
                        placeholder="Password"
                        autocomplete="current-password"
                        @keyup.enter="confirmPassword"
                    />

                    <InputError :message="form.error" class="mt-2" />
                </div>
            </template>

            <template #footer>
                <SecondaryButton @click="closeModal">
                    Cancel
                </SecondaryButton>

                <PrimaryButton
                    class="ms-3"
                    :class="{ 'opacity-25': form.processing }"
                    :disabled="form.processing"
                    @click="confirmPassword"
                >
                    {{ button }}
                </PrimaryButton>
            </template>
        </DialogModal>
    </span>
</template>


================================================
FILE: resources/js/Jetstream/DangerButton.vue
================================================
<script setup>
defineProps({
    type: {
        type: String,
        default: 'button',
    },
});
</script>

<template>
    <button :type="type" class="inline-flex items-center justify-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
        <slot />
    </button>
</template>


================================================
FILE: resources/js/Jetstream/DialogModal.vue
================================================
<script setup>
import Modal from '@/Jetstream/Modal.vue';

const emit = defineEmits(['close']);

defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    maxWidth: {
        type: String,
        default: '2xl',
    },
    closeable: {
        type: Boolean,
        default: true,
    },
});

const close = () => {
    emit('close');
};
</script>

<template>
    <Modal
        :show="show"
        :max-width="maxWidth"
        :closeable="closeable"
        @close="close"
    >
        <div class="px-6 py-4">
            <div class="text-lg font-medium text-gray-900 dark:text-gray-100">
                <slot name="title" />
            </div>

            <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
                <slot name="content" />
            </div>
        </div>

        <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 dark:bg-gray-800 text-end">
            <slot name="footer" />
        </div>
    </Modal>
</template>


================================================
FILE: resources/js/Jetstream/Dropdown.vue
================================================
<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue';

const props = defineProps({
    align: {
        type: String,
        default: 'right',
    },
    width: {
        type: String,
        default: '48',
    },
    contentClasses: {
        type: Array,
        default: () => ['py-1', 'bg-white dark:bg-gray-700'],
    },
});

let open = ref(false);

const closeOnEscape = (e) => {
    if (open.value && e.key === 'Escape') {
        open.value = false;
    }
};

onMounted(() => document.addEventListener('keydown', closeOnEscape));
onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));

const widthClass = computed(() => {
    return {
        '48': 'w-48',
    }[props.width.toString()];
});

const alignmentClasses = computed(() => {
    if (props.align === 'left') {
        return 'ltr:origin-top-left rtl:origin-top-right start-0';
    }

    if (props.align === 'right') {
        return 'ltr:origin-top-right rtl:origin-top-left end-0';
    }

    return 'origin-top';
});
</script>

<template>
    <div class="relative">
        <div @click="open = ! open">
            <slot name="trigger" />
        </div>

        <!-- Full Screen Dropdown Overlay -->
        <div v-show="open" class="fixed inset-0 z-40" @click="open = false" />

        <transition
            enter-active-class="transition ease-out duration-200"
            enter-from-class="transform opacity-0 scale-95"
            enter-to-class="transform opacity-100 scale-100"
            leave-active-class="transition ease-in duration-75"
            leave-from-class="transform opacity-100 scale-100"
            leave-to-class="transform opacity-0 scale-95"
        >
            <div
                v-show="open"
                class="absolute z-50 mt-2 rounded-md shadow-lg"
                :class="[widthClass, alignmentClasses]"
                style="display: none;"
                @click="open = false"
            >
                <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
                    <slot name="content" />
                </div>
            </div>
        </transition>
    </div>
</template>


================================================
FILE: resources/js/Jetstream/DropdownLink.vue
================================================
<script setup>
import { Link } from '@inertiajs/vue3';

defineProps({
    href: String,
    as: String,
});
</script>

<template>
    <div>
        <button v-if="as == 'button'" type="submit" class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out">
            <slot />
        </button>

        <a v-else-if="as =='a'" :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out">
            <slot />
        </a>

        <Link v-else :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out">
            <slot />
        </Link>
    </div>
</template>


================================================
FILE: resources/js/Jetstream/FormSection.vue
================================================
<script setup>
import { computed, useSlots } from 'vue';
import SectionTitle from '@/Jetstream/SectionTitle.vue';

defineEmits(['submitted']);

const hasActions = computed(() => !! useSlots().actions);
</script>

<template>
    <div class="md:grid md:grid-cols-3 md:gap-6">
        <SectionTitle>
            <template #title>
                <slot name="title" />
            </template>
            <template #description>
                <slot name="description" />
            </template>
        </SectionTitle>

        <div class="mt-5 md:mt-0 md:col-span-2">
            <form @submit.prevent="$emit('submitted')">
                <div
                    class="px-4 py-5 bg-white dark:bg-gray-800 sm:p-6 shadow"
                    :class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'"
                >
                    <div class="grid grid-cols-6 gap-6">
                        <slot name="form" />
                    </div>
                </div>

                <div v-if="hasActions" class="flex items-center justify-end px-4 py-3 bg-gray-50 dark:bg-gray-800 text-end sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
                    <slot name="actions" />
                </div>
            </form>
        </div>
    </div>
</template>


================================================
FILE: resources/js/Jetstream/InputError.vue
================================================
<script setup>
defineProps({
    message: String,
});
</script>

<template>
    <div v-show="message">
        <p class="text-sm text-red-600 dark:text-red-400">
            {{ message }}
        </p>
    </div>
</template>


================================================
FILE: resources/js/Jetstream/InputLabel.vue
================================================
<script setup>
defineProps({
    value: String,
});
</script>

<template>
    <label class="block font-medium text-sm text-gray-700 dark:text-gray-300">
        <span v-if="value">{{ value }}</span>
        <span v-else><slot /></span>
    </label>
</template>


================================================
FILE: resources/js/Jetstream/Modal.vue
================================================
<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    maxWidth: {
        type: String,
        default: '2xl',
    },
    closeable: {
        type: Boolean,
        default: true,
    },
});

const emit = defineEmits(['close']);
const dialog = ref();
const showSlot = ref(props.show);

watch(() => props.show, () => {
    if (props.show) {
        document.body.style.overflow = 'hidden';
        showSlot.value = true;
        dialog.value?.showModal();
    } else {
        document.body.style.overflow = null;
        setTimeout(() => {
            dialog.value?.close();
            showSlot.value = false;
        }, 200);
    }
});

const close = () => {
    if (props.closeable) {
        emit('close');
    }
};

const closeOnEscape = (e) => {
    if (e.key === 'Escape' && props.show) {
        close();
    }
};

onMounted(() => document.addEventListener('keydown', closeOnEscape));

onUnmounted(() => {
    document.removeEventListener('keydown', closeOnEscape);
    document.body.style.overflow = null;
});

const maxWidthClass = computed(() => {
    return {
        'sm': 'sm:max-w-sm',
        'md': 'sm:max-w-md',
        'lg': 'sm:max-w-lg',
        'xl': 'sm:max-w-xl',
        '2xl': 'sm:max-w-2xl',
    }[props.maxWidth];
});
</script>

<template>
    <dialog class="z-50 m-0 min-h-full min-w-full overflow-y-auto bg-transparent backdrop:bg-transparent" ref="dialog">
        <div class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
            <transition
                enter-active-class="ease-out duration-300"
                enter-from-class="opacity-0"
                enter-to-class="opacity-100"
                leave-active-class="ease-in duration-200"
                leave-from-class="opacity-100"
                leave-to-class="opacity-0"
            >
                <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
                    <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75" />
                </div>
            </transition>

            <transition
                enter-active-class="ease-out duration-300"
                enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                enter-to-class="opacity-100 translate-y-0 sm:scale-100"
                leave-active-class="ease-in duration-200"
                leave-from-class="opacity-100 translate-y-0 sm:scale-100"
                leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
                <div v-show="show" class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
                    <slot v-if="showSlot"/>
                </div>
            </transition>
        </div>
    </dialog>
</template>


================================================
FILE: resources/js/Jetstream/NavLink.vue
================================================
<script setup>
import { computed } from 'vue';
import { Link } from '@inertiajs/vue3';

const props = defineProps({
    href: String,
    active: Boolean,
});

const classes = computed(() => {
    return props.active
        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out';
});
</script>

<template>
    <Link :href="href" :class="classes">
        <slot />
    </Link>
</template>


================================================
FILE: resources/js/Jetstream/PrimaryButton.vue
================================================
<script setup>
defineProps({
    type: {
        type: String,
        default: 'submit',
    },
});
</script>

<template>
    <button :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-50 transition ease-in-out duration-150">
        <slot />
    </button>
</template>


================================================
FILE: resources/js/Jetstream/ResponsiveNavLink.vue
================================================
<script setup>
import { computed } from 'vue';
import { Link } from '@inertiajs/vue3';

const props = defineProps({
    active: Boolean,
    href: String,
    as: String,
});

const classes = computed(() => {
    return props.active
        ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
        : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out';
});
</script>

<template>
    <div>
        <button v-if="as == 'button'" :class="classes" class="w-full text-start">
            <slot />
        </button>

        <Link v-else :href="href" :class="classes">
            <slot />
        </Link>
    </div>
</template>


================================================
FILE: resources/js/Jetstream/SecondaryButton.vue
================================================
<script setup>
defineProps({
    type: {
        type: String,
        default: 'button',
    },
});
</script>

<template>
    <button :type="type" class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150">
        <slot />
    </button>
</template>


================================================
FILE: resources/js/Jetstream/SectionBorder.vue
================================================
<template>
    <div class="hidden sm:block">
        <div class="py-8">
            <div class="border-t border-gray-200 dark:border-gray-700" />
        </div>
    </div>
</template>


================================================
FILE: resources/js/Jetstream/SectionTitle.vue
================================================
<template>
    <div class="md:col-span-1 flex justify-between">
        <div class="px-4 sm:px-0">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                <slot name="title" />
            </h3>

            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                <slot name="description" />
            </p>
        </div>

        <div class="px-4 sm:px-0">
            <slot name="aside" />
        </div>
    </div>
</template>


================================================
FILE: resources/js/Jetstream/TextInput.vue
================================================
<script setup>
import { onMounted, ref } from 'vue';

defineProps({
    modelValue: String,
});

defineEmits(['update:modelValue']);

const input = ref(null);

onMounted(() => {
    if (input.value.hasAttribute('autofocus')) {
        input.value.focus();
    }
});

defineExpose({ focus: () => input.value.focus() });
</script>

<template>
    <input
        ref="input"
        class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
    >
</template>


================================================
FILE: resources/js/Jetstream/Welcome.vue
================================================
<script setup>
import ApplicationLogo from '@/Jetstream/ApplicationLogo.vue';
</script>

<template>
    <div>
        <div class="p-6 lg:p-8 bg-white dark:bg-gray-800 dark:bg-gradient-to-bl dark:from-gray-700/50 dark:via-transparent border-b border-gray-200 dark:border-gray-700">
            <ApplicationLogo class="block h-12 w-auto" />

            <h1 class="mt-8 text-2xl font-medium text-gray-900 dark:text-white">
                Welcome to your Jetstream application!
            </h1>

            <p class="mt-6 text-gray-500 dark:text-gray-400 leading-relaxed">
                Laravel Jetstream provides a beautiful, robust starting point for your next Laravel application. Laravel is designed
                to help you build your application using a development environment that is simple, powerful, and enjoyable. We believe
                you should love expressing your creativity through programming, so we have spent time carefully crafting the Laravel
                ecosystem to be a breath of fresh air. We hope you love it.
            </p>
        </div>

        <div class="bg-gray-200 dark:bg-gray-800 bg-opacity-25 grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8 p-6 lg:p-8">
            <div>
                <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
                    </svg>
                    <h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
                        <a href="https://laravel.com/docs">Documentation</a>
                    </h2>
                </div>

                <p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    Laravel has wonderful documentation covering every aspect of the framework. Whether you're new to the framework or have previous experience, we recommend reading all of the documentation from beginning to end.
                </p>

                <p class="mt-4 text-sm">
                    <a href="https://laravel.com/docs" class="inline-flex items-center font-semibold text-indigo-700 dark:text-indigo-300">
                        Explore the documentation

                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ms-1 w-5 h-5 fill-indigo-500 dark:fill-indigo-200">
                            <path fill-rule="evenodd" d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </p>
            </div>

            <div>
                <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
                        <path stroke-linecap="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
                    </svg>
                    <h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
                        <a href="https://laracasts.com">Laracasts</a>
                    </h2>
                </div>

                <p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
                </p>

                <p class="mt-4 text-sm">
                    <a href="https://laracasts.com" class="inline-flex items-center font-semibold text-indigo-700 dark:text-indigo-300">
                        Start watching Laracasts

                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ms-1 w-5 h-5 fill-indigo-500 dark:fill-indigo-200">
                            <path fill-rule="evenodd" d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </p>
            </div>

            <div>
                <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                    </svg>
                    <h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
                        <a href="https://tailwindcss.com/">Tailwind</a>
                    </h2>
                </div>

                <p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    Laravel Jetstream is built with Tailwind, an amazing utility first CSS framework that doesn't get in your way. You'll be amazed how easily you can build and maintain fresh, modern designs with this wonderful framework at your fingertips.
                </p>
            </div>

            <div>
                <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                    </svg>
                    <h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
                        Authentication
                    </h2>
                </div>

                <p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                    Authentication and registration views are included with Laravel Jetstream, as well as support for user email verification and resetting forgotten passwords. So, you're free to get started with what matters most: building your application.
                </p>
            </div>
        </div>
    </div>
</template>


================================================
FILE: resources/js/Lang/Flags/flagBg.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480">
    <g fill-rule="evenodd" stroke-width="1pt">
      <path fill="#de2110" d="M0 319.997h640V480H0z" />
      <path fill="#fff" d="M0 0h640v160.003H0z" />
      <path fill="#319400" d="M0 160.003h640v160.003H0z" />
    </g>
  </svg>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "flagBg",
});
</script>


================================================
FILE: resources/js/Lang/Flags/flagDe.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480">
    <path fill="#ffce00" d="M0 320h640v160.002H0z" />
    <path d="M0 0h640v160H0z" />
    <path fill="#d00" d="M0 160h640v160H0z" />
  </svg>
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "flagDe",
});
</script>


================================================
FILE: resources/js/Lang/Flags/flagEn.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480">
    <defs>
      <clipPath id="a">
        <path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z" />
      </clipPath>
    </defs>
    <g clip-path="url(#a)" transform="translate(80) scale(.94)">
      <g stroke-width="1pt">
        <path fill="#006" d="M-256 0H768.02v512.01H-256z" />
        <path
          d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z"
          fill="#fff"
        />
        <path
          d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z"
          fill="#fff"
        />
        <path
          d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z"
          fill="#c00"
        />
      </g>
    </g>
  </svg>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "flagEn",
});
</script>


================================================
FILE: resources/js/Lang/Flags/flagFr.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480">
    <g fill-rule="evenodd" stroke-width="1pt">
      <path fill="#fff" d="M0 0h640v480H0z" />
      <path fill="#00267f" d="M0 0h213.337v480H0z" />
      <path fill="#f31830" d="M426.662 0H640v480H426.662z" />
    </g>
  </svg>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "flagFr",
});
</script>


================================================
FILE: resources/js/Lang/Flags/flagRu.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480">
    <g fill-rule="evenodd" stroke-width="1pt">
      <path fill="#fff" d="M0 0h640v480H0z" />
      <path fill="#0039a6" d="M0 160.003h640V480H0z" />
      <path fill="#d52b1e" d="M0 319.997h640V480H0z" />
    </g>
  </svg>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "flagRu",
});
</script>


================================================
FILE: resources/js/Lang/Flags/flagTr.vue
================================================
<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480">
    <g fill-rule="evenodd">
      <path fill="#f31930" d="M0 0h640v480H0z" />
      <path
        d="M406.977 247.473c0 66.215-54.606 119.89-121.97 119.89S163.04 313.686 163.04 247.472s54.606-119.89 121.968-119.89 121.97 53.677 121.97 119.89z"
        fill="#fff"
      />
      <path
        d="M413.077 247.467c0 52.97-43.686 95.91-97.575 95.91s-97.574-42.94-97.574-95.91 43.686-95.91 97.574-95.91 97.575 42.94 97.575 95.91z"
        fill="#f31830"
      />
      <path
        d="M430.726 191.465l-.985 44.318-41.345 11.225 40.756 14.514-.984 40.642 26.58-31.738 40.164 13.934-23.233-34.06 28.352-33.868-43.513 11.998-25.793-36.964z"
        fill="#fff"
      />
    </g>
  </svg>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "flagTr",
});
</script>


================================================
FILE: resources/js/Lang/Flags/flagZh.vue
================================================
<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 640 480"
  >
    <defs>
      <path id="a" fill="#ffde00" d="M-.588.81L0-1 .588.81-.952-.31H.952z" />
    </defs>
    <path d="M0 0h640v480H0z" fill="#de2910" />
    <use
      xlink:href="#a"
      transform="matrix(71.9991 0 0 72 119.999 120)"
      width="30"
      height="20"
    />
    <use
      xlink:href="#a"
      transform="matrix(-12.33562 -20.5871 20.58684 -12.33577 240.291 47.996)"
      width="30"
      height="20"
    />
    <use
      xlink:href="#a"
      transform="matrix(-3.38573 -23.75998 23.75968 -3.38578 287.95 95.796)"
      width="30"
      height="20"
    />
    <use
      xlink:href="#a"
      transform="matrix(6.5991 -23.0749 23.0746 6.59919 287.959 168.012)"
      width="30"
      height="20"
    />
    <use
      xlink:href="#a"
      transform="matrix(14.9991 -18.73557 18.73533 14.99929 239.933 216.054)"
      width="30"
      height="20"
    />
  </svg>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "flagZh",
});
</script>


================================================
FILE: resources/js/Lang/bg/auth_lang_bg.js
================================================
const authLangBg = {
    name: "име",
    email: "Електронна поща",
    password: "парола",
    rememberMe: "Помни ме",
    forgotPassword: "Забравена парола?",
    passwordConfirmation: "Потвърдете паролата",
    login: "вход",
    logout: "Изход",
    register: "Регистрирай се",
    alreadyRegistered: "Вече регистриран?",
    terms: "{0} {1} {2} {3}",
    iAgreeToThe: "Съгласен съм с",
    termsOfService: "Условия за ползване",
    and: "и",
    privacyPolicy: "Политика за поверителност",
    emailPasswordResetLink: "Изпратете връзка за нулиране на паролата",
    backToLogin: "Обратно към вход",
    forgotPasswordGreeting: "Забравена парола?",
    forgotPasswordSubGreeting: "Напишете вашия имейл адрес и ние ще ви изпратим връзка за нулиране на паролата",
    registerGreeting: "Регистрирайте се за нов акаунт",
    loginGreeting: "Влезте в акаунта си",
    reLogin: "Влезте отново",
    validationMessage: {
        name: {
            required: "Полето за име е задължително"
        },
        email: {
            required: "Полето за имейл е задължително",
            email: "Имейлът трябва да е валиден имейл адрес"
        },
        password: {
            required: "Полето за парола е задължително"
        },
        passwordConfirmation: {
            required: "Полето за потвърждение на паролата е задължително"
        }
    }
};

export default authLangBg;


================================================
FILE: resources/js/Lang/bg/general_lang_bg.js
================================================
const generalLangBg = {
    brandName: "LaraQuality",
    /* Theme */
    darkMode: "Тъмна тема",
    lightMode: "Светеща тема",
    auto: "Автоматично",
    /* Error */
    somethingWentWrong: "Опа, нещо се обърка",
    /* Simple Terms */
    save: 'Запазете',
    reset: 'Нулиране',
    cancel: 'Отмяна',
    delete: 'Изтрий',
    edit: 'редактиране',
    view: 'Преглед'
};

export default generalLangBg;


================================================
FILE: resources/js/Lang/bg/main_menu_lang_bg.js
================================================
const mainMenuLangBg = {
    authPages: "Страници за удостоверяване",
    authLogin: "Вход",
    authRegister: "Регистрация",
    authForgotPassword: "Забравена парола",
    authLockScreen: "Заключен екран",
    authProfile: "Профил",
    components: "Компоненти",
    componentAlert: "Сигнал",
    componentAvatar: "Аватар",
    componentBadge: "Значка",
    componentBreadcrumb: "Breadcrumb",
    componentButton: "Бутон",
    componentCollapsible: "Сгъваем",
    componentContentBox: "Кутия за съдържание",
    componentDropdown: "Падащо меню",
    componentList: "Списък",
    componentLoading: "Зареждане",
    componentModal: "Modal",
    componentPagination: "Пагинация",
    componentProgressBar: "Лента на напредъка",
    componentStatisticWidget: "Статистическа витрина",
    componentTab: "Tab",
    componentTable: "Таблица",
    componentTableJson: "Таблица(JSON)",
    componentTableBackend: "Таблица(BackEnd)",
    componentTooltip: "Балон с информация",
    layoutElements: "Елементи на оформление",
    layoutStructure: "Структура на оформлението",
    layoutGrid: "Решетка",
    formElements: "Елементи на формуляр",
    formStructure: "Структура на формата",
    formInputGroup: "Група за въвеждане",
    formSimpleInputs: "Прости входове",
    formRepeatableInput: "Повтаряем вход",
    formDateTimeInput: "Въвеждане на дата/час",
    formSelectInput: "Избор на въвеждане",
    externalSources: "Външни източници",
    externalGitHubRepo: 'Github Repo',
    externalTailwindcssDocument: "Документ TailwindCSS",
    externalVuejsDocument: "Документ Vuejs",
    externalInertiaDocument: "Документ Inertiajs",
    externalLaravelDocument: "Документ Laravel",
    footerHelp: "Помощ",
    footerSettings: "Настройки"
};

export default mainMenuLangBg;


================================================
FILE: resources/js/Lang/bg/notification_lang_bg.js
================================================
const notification_bg = {
    pendingWorks: 'Предстоящи работи',
    unfinishedTodos: 'Текущи задачи',
    unreadMessages: 'Непрочетени съобщения'
};

export default notification_bg;


================================================
FILE: resources/js/Lang/bg/user_menu_lang_bg.js
================================================
const userMenuLangBg = {
    manageAccount: "Manage Account",
    manageTeam: "Manage Team",
    switchTeams: "Switch Team",
    language: "Language",
    darkMode: "Dark Mode",
    profile: "Profile",
    api: "API Tokens",
    teamSettings: "Team Settings",
    createNewTeam: "Create New Team",
    auto: "Auto",
    dark: "Dark",
    light: "Light",
    logout: "Logout"
};

export default userMenuLangBg;


================================================
FILE: resources/js/Lang/de/auth_lang_de.js
================================================
const authLangDe = {
    name: "Name",
    email: "Email",
    password: "Passwort",
    rememberMe: "Behalte mich in Erinnerung",
    forgotPassword: "Passwort vergessen?",
    passwordConfirmation: "Passwort bestätigen",
    login: "Anmeldung",
    logout: "Abmeldung",
    register: "Registrierung",
    alreadyRegistered: "Bereits registriert?",
    terms: "{0} {1} {2} {3}",
    iAgreeToThe: "Ich stimme den",
    termsOfService: "Nutzungsbedingungen",
    and: "und",
    privacyPolicy: "Datenschutz-Bestimmungen",
    emailPasswordResetLink: "E-Mail-Passwort-Zurücksetzungslink",
    backToLogin: "Zurück zum Login",
    forgotPasswordGreeting: "Haben Sie Ihr Passwort vergessen? Kein Problem.",
    forgotPasswordSubGreeting: "Geben Sie Ihre E-Mail-Adresse ein und wir senden Ihnen einen Link zum Zurücksetzen des Passworts.",
    registerGreeting: "Registrieren Sie sich für ein neues Konto",
    loginGreeting: "Melden Sie sich bei Ihrem Konto an",
    reLogin: "Melden Sie sich erneut an",
    validationMessage: {
        name: {
            required: "Das Namensfeld ist erforderlich"
        },
        email: {
            required: "Das E-Mail-Feld ist erforderlich",
            email: "Die E-Mail muss eine gültige E-Mail-Adresse sein"
        },
        password: {
            required: "Das Passwortfeld ist erforderlich"
        },
        passwordConfirmation: {
            required: "Das Passwortbestätigungsfeld ist erforderlich"
        }
    }
};

export default authLangDe;


================================================
FILE: resources/js/Lang/de/general_lang_de.js
================================================
const generalLangDe = {
    brandName: "LaraQuality",
    /* Theme */
    darkMode: "Dunkles Thema",
    lightMode: "Leuchtendes Thema",
    auto: "Automatisch",
    /* Error */
    somethingWentWrong: "Ups! Irgendwas lief schief",
    /* Simple Terms */
    save: 'Speichern',
    reset: 'Zurücksetzen',
    cancel: 'Abbrechen',
    delete: 'Löschen',
    edit: 'Bearbeiten',
    view: 'Aussicht'
};

export default generalLangDe;


================================================
FILE: resources/js/Lang/de/main_menu_lang_de.js
================================================
const mainMenuLangDe = {
    authPages: "Auth-Seiten",
    authLogin: "Anmeldung",
    authRegister: "Registrieren",
    authForgotPassword: "Passwort vergessen",
    authLockScreen: "Bildschirm sperren",
    authProfile: "Profile",
    components: "Komponenten",
    componentAlert: "Alarm",
    componentAvatar: "Benutzerbild",
    componentBadge: "Abzeichen",
    componentBreadcrumb: "Breadcrumb",
    componentButton: "Taste",
    componentCollapsible: "Zusammenklappbar",
    componentContentBox: "Inhaltsfeld",
    componentDropdown: "Dropdown-Liste",
    componentList: "Liste",
    componentLoading: "Wird geladen",
    componentModal: "Modal",
    componentPagination: "Seitennummerierung",
    componentProgressBar: "Fortschrittsanzeige",
    componentStatisticWidget: "Statistik-Widget",
    componentTab: "Tab",
    componentTable: "Tabelle",
    componentTableJson: "Tabelle(JSON)",
    componentTableBackend: "Tabelle(BackEnd)",
    componentTooltip: "Kurzinfo",
    layoutElements: "Layout-Elemente",
    layoutStructure: "Layoutstruktur",
    layoutGrid: "Netz",
    formElements: "Formularelemente",
    formStructure: "Formularstruktur",
    formInputGroup: "Eingangsgruppe",
    formSimpleInputs: "Einfache Eingaben",
    formRepeatableInput: "Wiederholbare Eingabe",
    formDateTimeInput: "Datum/Uhrzeit-Eingabe",
    formSelectInput: "Wählen Sie Eingang",
    externalSources: "Externe Quellen",
    externalGitHubRepo: 'Github-Repo',
    externalTailwindcssDocument: "TailwindCSS-Dokument",
    externalVuejsDocument: "Vuejs-Dokument",
    externalInertiaDocument: "Inertiajs-Dokument",
    externalLaravelDocument: "Laravel-Dokument",
    footerHelp: "Hilfe",
    footerSettings: "Einstellungen"
};

export default mainMenuLangDe;


================================================
FILE: resources/js/Lang/de/notification_lang_de.js
================================================
const notification_de = {
    pendingWorks: 'Ausstehende Arbeiten',
    unfinishedTodos: 'Laufende Aufgaben',
    unreadMessages: 'ungelesene Nachrichten'
};

export default notification_de;


================================================
FILE: resources/js/Lang/de/user_menu_lang_de.js
================================================
const userMenuLangDe = {
    manageAccount: "Manage Account",
    manageTeam: "Manage Team",
    switchTeams: "Switch Team",
    language: "Language",
    darkMode: "Dark Mode",
    profile: "Profile",
    api: "API Tokens",
    teamSettings: "Team Settings",
    createNewTeam: "Create New Team",
    auto: "Auto",
    dark: "Dark",
    light: "Light",
    logout: "Logout"
};

export default userMenuLangDe;


================================================
FILE: resources/js/Lang/en/auth_lang_en.js
================================================
const authLangEn = {
    name: "Name",
    email: "Email",
    password: "Password",
    rememberMe: "Remember me",
    forgotPassword: "Forgot your password?",
    passwordConfirmation: "Confirm Password",
    login: "Login",
    logout: "Logout",
    register: "Register",
    alreadyRegistered: "Already registered?",
    terms: "{0} {1} {2} {3}",
    iAgreeToThe: "I agree to the",
    termsOfService: "Terms of Service",
    and: "and",
    privacyPolicy: "Privacy Policy",
    emailPasswordResetLink: "Email Password Reset Link",
    backToLogin: "Back to Login",
    forgotPasswordGreeting: "Forgot your password? No problem.",
    forgotPasswordSubGreeting: "Enter your email address and we will send you a link to reset your password.",
    registerGreeting: "Register for a new account",
    loginGreeting: "Login to your account",
    reLogin: "Re-Login",
    validationMessage: {
        name: {
            required: "The name filed is required"
        },
        email: {
            required: "The email filed is required",
            email: "The email must be a valid email address"
        },
        password: {
            required: "The password filed is required"
        },
        passwordConfirmation: {
            required: "The password confirmation filed is required"
        }
    }
};

export default authLangEn;


================================================
FILE: resources/js/Lang/en/general_lang_en.js
================================================
const generalLangEn = {
    brandName: "LaraQuality",
    /* Theme */
    darkMode: "Dark Mode",
    lightMode: "Light Mode",
    auto: "Auto",
    /* Error */
    somethingWentWrong: "Oops, Something went wrong",
    /* Simple Terms */
    save: 'Save',
    reset: 'Reset',
    cancel: 'Cancel',
    delete: 'Delete',
    edit: 'Edit',
    view: 'View'
};

export default generalLangEn;


================================================
FILE: resources/js/Lang/en/main_menu_lang_en.js
================================================
const mainMenuLangEn = {
    authPages: "Auth Pages",
    authLogin: "Login",
    authRegister: "Register",
    authForgotPassword: "Forgot Password",
    authLockScreen: "Lock Screen",
    authProfile: "Profile",
    components: "Components",
    componentAlert: "Alert",
    componentAvatar: "Avatar",
    componentBadge: "Badge",
    componentBreadcrumb: "Breadcrumb",
    componentButton: "Button",
    componentCollapsible: "Collapsible",
    componentContentBox: "Content Box",
    componentDropdown: "Dropdown",
    componentList: "List",
    componentLoading: "Loading",
    componentModal: "Modal",
    componentPagination: "Pagination",
    componentProgressBar: "Progress Bar",
    componentStatisticWidget: "Statistic Widget",
    componentTab: "Tab",
    componentTable: "Table",
    componentTableJson: "Table(JSON)",
    componentTableBackend: "Table(BackEnd)",
    componentTooltip: "Tooltip",
    layoutElements: "Layout Elements",
    layoutStructure: "Layout Structure",
    layoutGrid: "Grid",
    formElements: "Form Elements",
    formStructure: "Form Structure",
    formInputGroup: "Input Group",
    formSimpleInputs: "Simple Inputs",
    formRepeatableInput: "Repeatable Input",
    formDateTimeInput: "Date/Time Input",
    formSelectInput: "Select Input",
    externalSources: "External Sources",
    externalGitHubRepo: 'Github Repo',
    externalTailwindcssDocument: "TailwindCSS Document",
    externalVuejsDocument: "Vuejs Document",
    externalInertiaDocument: "Inertiajs Document",
    externalLaravelDocument: "Laravel Document",
    footerHelp: "Help",
    footerSettings: "Settings"
};

export default mainMenuLangEn;


================================================
FILE: resources/js/Lang/en/notification_lang_en.js
================================================
const notification_en = {
    pendingWorks: 'Pending Works',
    unfinishedTodos: 'Unfinished Todos',
    unreadMessages: 'Unread Messages'
};

export default notification_en;


================================================
FILE: resources/js/Lang/en/pagination_lang.js
================================================
const pagination_en = {
    detailText: "{totalPage} pages - {totalRecord} records",
    previous: "Previous",
    next: "Next",
}
export default pagination_en


================================================
FILE: resources/js/Lang/en/table_lang.js
================================================
const table_en = {
    searchPlaceHolder: "search",
    optionsModalTitle: "Table Options",
    optionsModalColumnOrder: "Column Order and Visibility",
    anyContentMessage: "There is any content for your search criteria",
    advancedSearch: "Advanced Search",
    itemsCountPerPage : "Items Count in a page",
    actionView: "View",
    actionEdit: "Edit",
    actionDelete: "Delete",
    missing: "Missing",
    contentKeyError: "Content Key is missing, please add a content key. It comes from controller. <br>Example: '<b><i>users</i></b>'=>Users::all()",
    searchRouteError: "Search route is missing, please add a search route. The search route is where the search parameters posted route (same page route) like <b><i>user.index</i></b>.",
    contentError: "Content is missing, please add a content dataset. It comes from controller. <br>Example: '<b><i>users</i></b>'=>Users::all()",
    headerError: "Header is missing, please add a header dataset. The table needs it for showing data columns."
}
export default table_en


================================================
FILE: resources/js/Lang/en/user_menu_lang_en.js
================================================
const userMenuLangEn = {
    manageAccount: "Manage Account",
    manageTeam: "Manage Team",
    switchTeams: "Switch Team",
    language: "Language",
    darkMode: "Dark Mode",
    profile: "Profile",
    api: "API Tokens",
    teamSettings: "Team Settings",
    createNewTeam: "Create New Team",
    auto: "Auto",
    dark: "Dark",
    light: "Light",
    logout: "Logout"
};

export default userMenuLangEn;


================================================
FILE: resources/js/Lang/fr/auth_lang_fr.js
================================================
const authLangFr = {
    name: "Nom",
    email: "Email",
    password: "Mot de passe",
    rememberMe: "Souviens-toi de moi",
    forgotPassword: "Mot de passe oublié?",
    passwordConfirmation: "Confirmer le mot de passe",
    login: "Connexion",
    logout: "Se déconnecter",
    register: "Registre",
    alreadyRegistered: "Déjà enregistré?",
    terms: "{0} {1} {2} {3}",
    iAgreeToThe: "Je suis d'accord avec les",
    termsOfService: "Conditions d'utilisation",
    and: "et",
    privacyPolicy: "Politique de confidentialité",
    emailPasswordResetLink: "Lien de réinitialisation du mot de passe par e-mail",
    backToLogin: "Retour à la connexion",
    forgotPasswordGreeting: "Mot de passe oublié? Pas de problème.",
    forgotPasswordSubGreeting: "Entrez votre adresse e-mail et nous vous enverrons un lien pour réinitialiser votre mot de passe.",
    registerGreeting: "Inscrivez-vous pour un nouveau compte",
    loginGreeting: "Connectez-vous à votre compte",
    reLogin: "Re-Login",
    validationMessage: {
        name: {
            required: "Le champ nom est obligatoire"
        },
        email: {
            required: "Le champ email est obligatoire",
            email: "L'e-mail doit être une adresse e-mail valide"
        },
        password: {
            required: "Le champ mot de passe est obligatoire"
        },
        passwordConfirmation: {
            required: "Le champ de confirmation du mot de passe est obligatoire"
        }
    }
};

export default authLangFr;


================================================
FILE: resources/js/Lang/fr/general_lang_fr.js
================================================
const generalLangFr = {
    brandName: "LaraQuality",
    /* Theme */
    darkMode: "Thème sombre",
    lightMode: "Thème de la lumière",
    auto: "Auto",
    /* Error */
    somethingWentWrong: "Oups, quelque chose s'est mal passé",
    /* Simple Terms */
    save: 'Sauvegarder',
    reset: 'Réinitialiser',
    cancel: 'Annuler',
    delete: 'Supprimer',
    edit: 'Éditer',
    view: 'Voir'
};

export default generalLangFr;


================================================
FILE: resources/js/Lang/fr/main_menu_lang_fr.js
================================================
const mainMenuLangFr = {
    authPages: "Pages d'authentification",
    authLogin: "Connexion",
    authRegister: "S'inscrire",
    authForgotPassword: "Mot de passe oublié",
    authLockScreen: "Écran verrouillé",
    authProfile: "Profil",
    components: "Composants",
    componentAlert: "Alerte",
    componentAvatar: "Avatar",
    componentBadge: "Badge",
    componentBreadcrumb: "Breadcrumb",
    componentButton: "Bouton",
    componentCollapsible: "Pliant",
    componentContentBox: "Boîte de contenu",
    componentDropdown: "Menu déroulant",
    componentList: "Lister",
    componentLoading: "Chargement",
    componentModal: "Modal",
    componentPagination: "Pagination",
    componentProgressBar: "Barre de progression",
    componentStatisticWidget: "Widget statistique",
    componentTab: "Languette",
    componentTable: "Table",
    componentTableJson: "Tableau(JSON)",
    componentTableBackend: "Tableau(BackEnd)",
    componentTooltip: "Info-bulle",
    layoutElements: "Éléments de mise en page",
    layoutStructure: "Structure de mise en page",
    layoutGrid: "Grille",
    formElements: "Éléments de formulaire",
    formStructure: "Structure du formulaire",
    formInputGroup: "Groupe d'entrée",
    formSimpleInputs: "Entrées simples",
    formRepeatableInput: "Entrée répétable",
    formDateTimeInput: "Entrée date/heure",
    formSelectInput: "Sélectionnez l'entrée",
    externalSources: "Sources externes",
    externalGitHubRepo: 'Dépôt Github',
    externalTailwindcssDocument: "TailwindCSS Document",
    externalVuejsDocument: "Vuejs Document",
    externalInertiaDocument: "Inertiajs Document",
    externalLaravelDocument: "Laravel Document",
    footerHelp: "Aider",
    footerSettings: "Réglages"
};

export default mainMenuLangFr;


================================================
FILE: resources/js/Lang/fr/notification_lang_fr.js
================================================
const notification_fr = {
    pendingWorks: 'Travaux en attente',
    unfinishedTodos: 'Tâches en cours',
    unreadMessages: 'Messages non lus'
};

export default notification_fr;


================================================
FILE: resources/js/Lang/fr/user_menu_lang_fr.js
================================================
const userMenuLangFr = {
    manageAccount: "Manage Account",
    manageTeam: "Manage Team",
    switchTeams: "Switch Team",
    language: "Language",
    darkMode: "Dark Mode",
    profile: "Profile",
    api: "API Tokens",
    teamSettings: "Team Settings",
    createNewTeam: "Create New Team",
    auto: "Auto",
    dark: "Dark",
    light: "Light",
    logout: "Logout"
};

export default userMenuLangFr;


================================================
FILE: resources/js/Lang/languages.js
================================================
/* Flags */
import flagBg from "@/Lang/Flags/flagBg.vue";
import flagDe from "@/Lang/Flags/flagDe.vue";
import flagEn from "@/Lang/Flags/flagEn.vue";
import flagFr from "@/Lang/Flags/flagFr.vue";
import flagRu from "@/Lang/Flags/flagRu.vue";
import flagTr from "@/Lang/Flags/flagTr.vue";
import flagZh from "@/Lang/Flags/flagZh.vue";

/* Languages */
const languages = [
    { id: "en", name: "English", flag: flagEn },
    { id: "tr", name: "Türkçe", flag: flagTr },
    { id: "bg", name: "български", flag: flagBg },
    { id: "de", name: "Deutsch", flag: flagDe },
    { id: "fr", name: "Français", flag: flagFr },
    { id: "ru", name: "Pусский", flag: flagRu },
    { id: "zh", name: "自从", flag: flagZh },
];

/* Translates */

/* Auth Translates */
import authLangBg from "@/Lang/bg/auth_lang_bg";
import authLangDe from "@/Lang/de/auth_lang_de";
import authLangEn from "@/Lang/en/auth_lang_en";
import authLangFr from "@/Lang/fr/auth_lang_fr";
import authLangRu from "@/Lang/ru/auth_lang_ru";
import authLangTr from "@/Lang/tr/auth_lang_tr";
import authLangZh from "@/Lang/zh/auth_lang_zh";
const authTranslates = {
    bg: authLangBg,
    de: authLangDe,
    en: authLangEn,
    fr: authLangFr,
    ru: authLangRu,
    tr: authLangTr,
    zh: authLangZh,
};

/*Side Menu Translates*/
import mainMenuLangBg from "@/Lang/bg/main_menu_lang_bg";
import mainMenuLangDe from "@/Lang/de/main_menu_lang_de";
import mainMenuLangEn from "@/Lang/en/main_menu_lang_en";
import mainMenuLangFr from "@/Lang/fr/main_menu_lang_fr";
import mainMenuLangRu from "@/Lang/ru/main_menu_lang_ru";
import mainMenuLangTr from "@/Lang/tr/main_menu_lang_tr";
import mainMenuLangZh from "@/Lang/zh/main_menu_lang_zh";
const mainMenuTranslates = {
    bg: mainMenuLangBg,
    de: mainMenuLangDe,
    en: mainMenuLangEn,
    fr: mainMenuLangFr,
    ru: mainMenuLangRu,
    tr: mainMenuLangTr,
    zh: mainMenuLangZh,
};

/*User Menu Translates*/
import userMenuLangBg from "@/Lang/bg/user_menu_lang_bg";
import userMenuLangDe from "@/Lang/de/user_menu_lang_de";
import userMenuLangEn from "@/Lang/en/user_menu_lang_en";
import userMenuLangFr from "@/Lang/fr/user_menu_lang_fr";
import userMenuLangRu from "@/Lang/ru/user_menu_lang_ru";
import userMenuLangTr from "@/Lang/tr/user_menu_lang_tr";
import userMenuLangZh from "@/Lang/zh/user_menu_lang_zh";
const userMenuTranslates = {
    bg: userMenuLangBg,
    de: userMenuLangDe,
    en: userMenuLangEn,
    fr: userMenuLangFr,
    ru: userMenuLangRu,
    tr: userMenuLangTr,
    zh: userMenuLangZh,
};

/*Notification Translates*/
import notificationLangBg from "@/Lang/bg/notification_lang_bg";
import notificationLangDe from "@/Lang/de/notification_lang_de";
import notificationLangEn from "@/Lang/en/notification_lang_en";
import notificationLangFr from "@/Lang/fr/notification_lang_fr";
import notificationLangRu from "@/Lang/ru/notification_lang_ru";
import notificationLangTr from "@/Lang/tr/notification_lang_tr";
import notificationLangZh from "@/Lang/zh/notification_lang_zh";
const notificationTranslates = {
    bg: notificationLangBg,
    de: notificationLangDe,
    en: notificationLangEn,
    fr: notificationLangFr,
    ru: notificationLangRu,
    tr: notificationLangTr,
    zh: notificationLangZh,
};

export {
    languages,
    authTranslates,
    mainMenuTranslates,
    userMenuTranslates,
    notificationTranslates
};


================================================
FILE: resources/js/Lang/ru/auth_lang_ru.js
================================================
const authLangRu = {
    email: "Электронное письмо",
    password: "Пароль",
    rememberMe: "Запомните меня",
    forgotPassword: "Забыли Ваш пароль?",
    passwordConfirmation: "Подтвердите пароль",
    login: "Входить",
    logout: "Выйти",
    register: "Pегистр",
    alreadyRegistered: "Уже зарегистрированы?",
    terms: "{0} {1} {2} {3}",
    iAgreeToThe: "Я согласен с",
    termsOfService: "Условия использования",
    and: "и",
    privacyPolicy: "Политика конфиденциальности",
    emailPasswordResetLink: "Ссылка для сброса пароля по электронной почте",
    backToLogin: "Назад к входу",
    forgotPasswordGreeting: "Забыли пароль? Никаких проблем.",
    forgotPasswordSubGreeting: "Введите свой адрес электронной почты, и мы отправим вам ссылку для сброса пароля.",
    registerGreeting: "Регистрирайте се за нов акаунт",
    loginGreeting: "Влезте в акаунта си",
    reLogin: "Войти снова",
    validationMessage: {
        email: {
            required: "Поле электронной почты обязательно",
            email: "Электронная почта должна быть действительным адресом электронной почты"
        },
        password: {
            required: "Поле пароля обязательно"
        },
        passwordConfirmation: {
            required: "Поле подтверждения пароля обязательно"
        }
    }
};

export default authLangRu;


================================================
FILE: resources/js/Lang/ru/general_lang_ru.js
================================================
const generalLangRu = {
    brandName: "LaraQuality",
    /* Theme */
    darkMode: "Темная тема",
    lightMode: "Светлая тема",
    auto: "Автоматический",
    /* Error */
    somethingWentWrong: "Упс! Что-то пошло не так",
    /* Simple Terms */
    save: 'Сохранять',
    reset: 'Перезагрузить',
    cancel: 'Отмена',
    delete: 'Удалить',
    edit: 'Редактировать',
    view: 'Вид'
};

export default generalLangRu;


================================================
FILE: resources/js/Lang/ru/main_menu_lang_ru.js
================================================
const mainMenuLangRu = {
    authPages: "Страницы авторизации",
    authLogin: "Авторизоваться",
    authRegister: "регистр",
    authForgotPassword: "Забыл пароль",
    authLockScreen: "Экран блокировки",
    authProfile: "Профиль",
    components: "Компоненты",
    componentAlert: "Тревога",
    componentAvatar: "Аватар",
    componentBadge: "Значок",
    componentBreadcrumb: "хлебные крошки",
    componentButton: "Кнопка",
    componentCollapsible: "Складной",
    componentContentBox: "Коробка содержимого",
    componentDropdown: "падать",
    componentList: "Список",
    componentLoading: "Загрузка",
    componentModal: "Модальный",
    componentPagination: "Пагинация",
    componentProgressBar: "Индикатор",
    componentStatisticWidget: "Статистический виджет",
    componentTab: "Вкладка",
    componentTable: "Таблица",
    componentTableJson: "Таблица(JSON)",
    componentTableBackend: "Таблица(BackEnd)",
    componentTooltip: "Подсказка",
    layoutElements: "Элементы макета",
    layoutStructure: "Структура макета",
    layoutGrid: "Сетка",
    formElements: "Элементы формы",
    formStructure: "Структура формы",
    formInputGroup: "Входная группа",
    formSimpleInputs: "Простые входы",
    formRepeatableInput: "Повторяемый ввод",
    formDateTimeInput: "Ввод даты/времени",
    formSelectInput: "Выберите ввод",
    externalSources: "Внешние источники",
    externalGitHubRepo: 'Репозиторий Github',
    externalTailwindcssDocument: "Документ TailwindCSS",
    externalVuejsDocument: "Документ Vuejs",
    externalInertiaDocument: "Документ Inertiajs",
    externalLaravelDocument: "Документ Laravel",
    footerHelp: "Помощь",
    footerSettings: "Настройки"
};

export default mainMenuLangRu;


================================================
FILE: resources/js/Lang/ru/notification_lang_ru.js
================================================
const notification_ru = {
    pendingWorks: 'Ожидающие работы',
    unfinishedTodos: 'Текущие дела',
    unreadMessages: 'Непрочитанные сообщения'
};

export default notification_ru;


================================================
FILE: resources/js/Lang/ru/user_menu_lang_ru.js
================================================
const userMenuLangRu = {
    manageAccount: "Manage Account",
    manageTeam: "Manage Team",
    switchTeams: "Switch Team",
    language: "Language",
    darkMode: "Dark Mode",
    profile: "Profile",
    api: "API Tokens",
    teamSettings: "Team Settings",
    createNewTeam: "Create New Team",
    auto: "Auto",
    dark: "Dark",
    light: "Light",
    logout: "Logout"
};

export default userMenuLangRu;


================================================
FILE: resources/js/Lang/tr/auth_lang_tr.js
================================================
const authLangTr = {
    name: "İsim",
    email: "Eposta",
    password: "Şifre",
    rememberMe: "Beni Hatırla",
    forgotPassword: "Şifreni unuttun mu?",
    passwordConfirmation: "Şifreyi Onayla",
    login: "Giriş",
    logout: "Çıkış",
    register: "Kayıt",
    alreadyRegistered: "Zaten hesabın var mı?",
    terms: "{0} {1} {2} {3}",
    iAgreeToThe: "kabul ediyorum",
    termsOfService: "Hizmet Şartlarını",
    and: "ve",
    privacyPolicy: "Gizlilik Politikasını",
    emailPasswordResetLink: "E-posta Şifre Sıfırlama Bağlantısı",
    backToLogin: "Girişe Geri Dön",
    forgotPasswordGreeting: "Şifrenizi mi unuttunuz? Sorun değil.",
    forgotPasswordSubGreeting: "E-posta adresinizi girin ve size bir şifre sıfırlama bağlantısı göndereceğiz.",
    registerGreeting: "Yeni bir hesap için kaydolun",
    loginGreeting: "Hesabınıza giriş yapın",
    reLogin: "Tekrar Giriş Yap",
    validationMessage: {
        name: {
            required: "İsim gereklidir"
        },
        email: {
            required: "Email adresi gereklidir",
            email: "Email adresi geçerli değil"
        },
        password: {
            required: "Şifre gereklidir"
        },
        passwordConfirmation: {
            required: "Şifre onayı gereklidir"
        }
    }
};

export default authLangTr;


================================================
FILE: resources/js/Lang/tr/general_lang_tr.js
================================================
const generalLangTr = {
    brandName: "LaraQuality",
    /* Theme */
    darkMode: "Aydınlık Tema",
    lightMode: "Karanlık Tema",
    auto: "Otomatik",
    /* Error */
    somethingWentWrong: "Üzügünüz! Birşeyler yanlış gitti",
    /* Simple Terms */
    save: 'Kaydet',
    reset: 'Sıfırla',
    cancel: 'İptal Et',
    delete: 'Sil',
    edit: 'Düzenle',
    view: 'Görüntüle'
};

export default generalLangTr;


================================================
FILE: resources/js/Lang/tr/main_menu_lang_tr.js
================================================
const mainMenuLangTr = {
    authPages: "Kullanıcı Sayfaları",
    authLogin: "Giriş",
    authRegister: "Kayıt",
    authForgotPassword: "Şifremi Unuttum",
    authLockScreen: "Kilit Ekranı",
    authProfile: "Profil",
    components: "Komponentler",
    componentAlert: "Alert",
    componentAvatar: "Avatar",
    componentBadge: "Rozet",
    componentBreadcrumb: "Breadcrumb",
    componentButton: "Düğme",
    componentCollapsible: "Açılır Liste",
    componentContentBox: "İçerik Kutusu",
    componentDropdown: "Açılır Menü",
    componentList: "Liste",
    componentLoading: "Yükleniyor Ekranı",
    componentModal: "Açılır Pencere",
    componentPagination: "Sayfalandırma",
    componentProgressBar: "İlerleme Göstergesi",
    componentStatisticWidget: "İstatistik Kutusu",
    componentTab: "Sekme",
    componentTable: "Tablo",
    componentTableJson: "Tablo(JSON)",
    componentTableBackend: "Tablo(BackEnd)",
    componentTooltip: "Bilgi Baloncuğu",
    layoutElements: "Yerleşim Bileşenleri",
    layoutStructure: "Yerleşim Yapısı",
    layoutGrid: "Izgara",
    formElements: "Form Bileşenleri",
    formStructure: "Form Yapısı",
    formInputGroup: "Input Grup",
    formSimpleInputs: "Klasik Inputlar",
    formRepeatableInput: "Tekrarlanabilir Input",
    formDateTimeInput: "Tarih/Zaman Input",
    formSelectInput: "Select Input",
    externalSources: "Dış Kaynaklar",
    externalGitHubRepo: 'Github Repo',
    externalTailwindcssDocument: "TailwindCSS Dökümanı",
    externalVuejsDocument: "Vuejs Dökümanı",
    externalInertiaDocument: "Inertiajs Dökümanı",
    externalLaravelDocument: "Laravel Dökümanı",
    footerHelp: "Yardım",
    footerSettings: "Ayarlar",
};

export default mainMenuLangTr;


================================================
FILE: resources/js/Lang/tr/notification_lang_tr.js
================================================
const notification_ = {
    pendingWorks: 'Bekleyen İşler',
    unfinishedTodos: 'Devam Eden Yapılacaklar',
    unreadMessages: 'Okunmamış Mesajlar'
};

export default notification_;


================================================
FILE: resources/js/Lang/tr/pagination_lang.js
================================================
const pagination_tr = {
    detailText: "Toplam: {totalPage} sayfa {totalRecord} kayıt",
    previous: "Önceki",
    next: "Sonraki",
}

export default pagination_tr


================================================
FILE: resources/js/Lang/tr/table_lang.js
================================================
const table_tr = {
    searchPlaceHolder: "Ara",
    optionsModalTitle: "Tablo Özellikleri",
    optionsModalColumnOrder: "Sütunları Sırala veya Gizle",
    anyContentMessage: "Aradığınız kriterde içerik bulunamadı",
    advancedSearch: "Detaylı Arama",
    itemsCountPerPage : "Sayfadaki eleman sayısı",
    actionView: "İncele",
    actionEdit: "Düzenle",
    actionDelete: "Sil",
    missing: "Eksik",
    contentKeyError: "Content Key eksik, lütfen content key değerini belirleyiniz. Bu değer ilgili kontrollerinizden gelir. Örnek: '<b><i>users</i></b>'=>Users::all()",
    searchRouteError: "Search route eksik, lütfen search route değerini belirleyiniz. Arama sorgularınızın gönderileceği yoldur(route), genellikle tablonuzun bulunduğu sayfa ile aynı routedir. Örnek: <b><i>user.index</i></b>.",
    contentError: "Content veri seti eksik, lütfen bir içerik seti(content) ekleyiniz. Bu değer ilgili kontrollerinizden gelir. Örnek: '<b><i>users</i></b>'=>Users::all()",
    headerError: "Header veri seti eksik, lütfen header veri setini ekleyiniz. Tablonuzdaki sütünlarda hangi alanları göstereceğiniz belirlediğiniz ayar öğesidir."
}

export default table_tr


================================================
FILE: resources/js/Lang/tr/user_menu_lang_tr.js
================================================
const userMenuLangTr = {
    manageAccount: "Hesap Yönetimi",
    manageTeam: "Takım Yönetimi",
    switchTeams: "Takım Değiştir",
    language: "Dil",
    darkMode: "Koyu Mod",
    profile: "Profil",
    api: "API Anahtarları",
    teamSettings: "Takım Ayarları",
    createNewTeam: "Yeni Takım Oluştur",
    auto: "Otomatik",
    dark: "Koyu",
    light: "Açık",
    logout: "Çıkış"
};

export default userMenuLangTr;


================================================
FILE: resources/js/Lang/zh/auth_lang_zh.js
================================================
const authLangZh = {
    name: "名称",
    email: "电子邮件",
    password: "密码",
    rememberMe: "记得我",
    forgotPassword: "忘记密码了吗？",
    passwordConfirmation: "确认密码",
    login: "登录",
    logout: "登出",
    register: "登记",
    alreadyRegistered: "已经注册？",
    terms: "{0} {1} {2} {3}",
    iAgreeToThe: "我同意",
    termsOfService: "服务条款",
    and: "和",
    privacyPolicy: "隐私政策",
    emailPasswordResetLink: "电子邮件密码重置链接",
    backToLogin: "返回登录",
    forgotPasswordGreeting: "忘记密码？没问题。",
    forgotPasswordSubGreeting: "输入您的电子邮件地址，我们将向您发送一个密码重置链接。",
    registerGreeting: "注册新账户",
    loginGreeting: "登录到您的账户",
    reLogin: "重新登录",
    validationMessage: {
        name: {
            required: "名称字段是必需的"
        },
        email: {
            required: "电子邮件字段是必需的",
            email: "电子邮件必须是有效的电子邮件地址"
        },
        password: {
            required: "密码字段为必填项"
        },
        passwordConfirmation: {
            required: "密码确认字段为必填项"
        }
    }
};

export default authLangZh;


================================================
FILE: resources/js/Lang/zh/general_lang_zh.js
================================================
const generalLangZh = {
    brandName: "LaraQuality",
    /* Theme */
    darkMode: "黑暗主题",
    lightMode: "轻主题",
    auto: "自动的",
    /* Error */
    somethingWentWrong: "哎呀！出事了",
    /* Simple Terms */
    save: '保存',
    reset: '重启',
    cancel: '取消',
    delete: '删除',
    edit: '编辑',
    view: '看法'
};

export default generalLangZh;


================================================
FILE: resources/js/Lang/zh/main_menu_lang_zh.js
================================================
const mainMenuLangZh = {
    authPages: "认证页面",
    authLogin: "登录",
    authRegister: "登记",
    authForgotPassword: "忘记密码",
    authLockScreen: "锁屏",
    authProfile: "轮廓",
    components: "成分",
    componentAlert: "警报",
    componentAvatar: "阿凡达",
    componentBadge: "徽章",
    componentBreadcrumb: "面包屑",
    componentButton: "按钮",
    componentCollapsible: "可折叠",
    componentContentBox: "内容框",
    componentDropdown: "落下",
    componentList: "列表",
    componentLoading: "正在加载",
    componentModal: "模态",
    componentPagination: "分页",
    componentProgressBar: "进度条",
    componentStatisticWidget: "统计小部件",
    componentTab: "标签",
    componentTable: "桌子",
    componentTableJson: "表(JSON)",
    componentTableBackend: "表(BackEnd)",
    componentTooltip: "工具提示",
    layoutElements: "布局元素",
    layoutStructure: "布局结构",
    layoutGrid: "网格",
    formElements: "表单元素",
    formStructure: "表格结构",
    formInputGroup: "输入组",
    formSimpleInputs: "简单输入",
    formRepeatableInput: "可重复输入",
    formDateTimeInput: "日期/时间输入",
    formSelectInput: "选择输入",
    externalSources: "外部来源",
    externalGitHubRepo: 'Github 回购',
    externalTailwindcssDocument: "TailwindCSS 文档",
    externalVuejsDocument: "Vuejs 文档",
    externalInertiaDocument: "Inertiajs 文档",
    externalLaravelDocument: "Laravel 文档",
    footerHelp: "帮助",
    footerSettings: "设置"
};

export default mainMenuLangZh;


================================================
FILE: resources/js/Lang/zh/notification_lang_zh.js
================================================
const notification_zh = {
    pendingWorks: '待定作品',
    unfinishedTodos: '正在进行的待办事项',
    unreadMessages: '未读消息'
};

export default notification_zh;


================================================
FILE: resources/js/Lang/zh/user_menu_lang_zh.js
================================================
const userMenuLangZh = {
    manageAccount: "Manage Account",
    manageTeam: "Manage Team",
    switchTeams: "Switch Team",
    language: "Language",
    darkMode: "Dark Mode",
    profile: "Profile",
    api: "API Tokens",
    teamSettings: "Team Settings",
    createNewTeam: "Create New Team",
    auto: "Auto",
    dark: "Dark",
    light: "Light",
    logout: "Logout"
};

export default userMenuLangZh;


================================================
FILE: resources/js/Layouts/AppLayout-new.vue
================================================
<template>
  <div>
    <Head :title="title" />

    <jet-banner />

    <div
      class="
        min-h-screen
        bg-gradient-to-l
        from-indigo-400
        to-blue-400
        dark:bg-gradient-to-b dark:from-indigo-900 dark:to-slate-900
        px-4
        sm:px-12
      "
    >
      <!-- Top Bar -->
      <div class="flex h-20 justify-between items-center text-white">
        <!-- Logo -->
        <div class="flex space-x-2 items-center">
          <!-- TODO: [TAQ-128]Make dynamic with Media Library -->
          <Logo class="w-10 h-10 text-white" />
          <span v-text="$page.props.project_info" class="text-3xl" />
        </div>
        <!-- Right Side -->
        <div class="flex justify-end items-center space-x-2">
          <!-- Misc Menu -->
          <Link :href="route('setting')">
            <icon
              icon="cog"
              size="lg"
              class="
                w-8
                h-8
                hover:-translate-y-1
                active:translate-y-0 active:scale-90
                transform
                transition-all
                duration-300
              "
            />
          </Link>
          <!-- Dark Mode -->
          <div
            class="
              flex
              w-8
              h-8
              justify-center
              items-center
              rounded-full
              cursor-pointer
              overflow-hidden
              text-white
              hover:scale-110
              active:scale-90
              transform
              transition-all
              duration-300
            "
            @click="
              () => {
                if (darkMode === 'light') {
                  darkMode = 'dark';
                } else if (darkMode === 'dark') {
                  darkMode = 'auto';
                } else {
                  darkMode = 'light';
                }
              }
            "
          >
            <transition-group name="darkTransition">
              <!-- Light -->
              <i
                v-if="darkMode === 'light'"
                class="pi pi-sun"
                v-tooltip.bottom="tm('lightMode')"
                key="light"
                style="font-size: 1.3rem"
              ></i>
              <!-- Auto -->
              <i
                v-if="darkMode === 'auto'"
                class="pi pi-palette"
                v-tooltip.bottom="tm('auto')"
                key="auto"
                style="font-size: 1.3rem"
              ></i>
              <!-- Dark -->
              <i
                v-if="darkMode === 'dark'"
                class="pi pi-moon"
                v-tooltip.bottom="tm('darkMode')"
                key="dark"
                style="font-size: 1.3rem"
              ></i>
            </transition-group>
          </div>
          <!-- Search -->
          <div
            v-if="!showSearchBar"
            class="
              cursor-pointer
              hover:-translate-y-1
              active:translate-y-0 active:scale-90
              transform
              transition-all
              duration-300
            "
            @click="showSearchBar = !showSearchBar"
          >
            <icon icon="search" size="lg" />
          </div>
          <!-- User Menu -->
          <div></div>
        </div>
      </div>
      <!-- Search Bar -->
      <div v-if="showSearchBar" class="relative text-slate-500">
        <icon icon="search" size="lg" class="absolute top-[1.125rem] left-4" />
        <input
          v-model="searchText"
          class="
            bg-white bg-opacity-60
            h-14
            w-full
            rounded-t-md
            border
            px-12
            text-2xl
            placeholder-slate-500
          "
          placeholder="Search"
        />
        <!-- Clear Icon -->
        <div
          v-if="searchText"
          @click="searchText = ''"
          class="flex rounded-full hover:bg-white cursor-pointer"
        >
          <icon
            icon="times"
            size="lg"
            class="absolute top-[1.125rem] right-12"
          />
        </div>

        <!-- Close Icon -->
        <icon
          @click="
            showSearchBar = false;
            searchText = '';
          "
          icon="level-up-alt"
          size="lg"
          class="absolute top-[1.125rem] right-4"
        />
      </div>
      <!-- Top Nav Bar -->
      <!-- Content -->
      <!-- Footer -->
      <nav class="bg-white border-b border-gray-100">
        <!-- Primary Navigation Menu -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex justify-between h-16">
            <div class="flex">
              <!-- Logo -->
              <div class="shrink-0 flex items-center">
                <Link :href="route('dashboard')">
                  <jet-application-mark class="block h-9 w-auto" />
                </Link>
              </div>

              <!-- Navigation Links -->
              <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
                <jet-nav-link
                  :href="route('dashboard')"
                  :active="route().current('dashboard')"
                >
                  Dashboard
                </jet-nav-link>
              </div>
            </div>

            <div class="hidden sm:flex sm:items-center sm:ml-6">
              <div class="ml-3 relative">
                <!-- Teams Dropdown -->
                <jet-dropdown
                  align="right"
                  width="60"
                  v-if="$page.props.jetstream.hasTeamFeatures"
                >
                  <template #trigger>
                    <span class="inline-flex rounded-md">
                      <button
                        type="button"
                        class="
                          inline-flex
                          items-center
                          px-3
                          py-2
                          border border-transparent
                          text-sm
                          leading-4
                          font-medium
                          rounded-md
                          text-gray-500
                          bg-white
                          hover:bg-gray-50 hover:text-gray-700
                          focus:outline-none focus:bg-gray-50
                          active:bg-gray-50
                          transition
                        "
                      >
                        {{ $page.props.auth.user.current_team.name }}

                        <svg
                          class="ml-2 -mr-0.5 h-4 w-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                        >
                          <path
                            fill-rule="evenodd"
                            d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
                            clip-rule="evenodd"
                          />
                        </svg>
                      </button>
                    </span>
                  </template>

                  <template #content>
                    <div class="w-60">
                      <!-- Team Management -->
                      <template v-if="$page.props.jetstream.hasTeamFeatures">
                        <div class="block px-4 py-2 text-xs text-gray-400">
                          Manage Team
                        </div>

                        <!-- Team Settings -->
                        <jet-dropdown-link
                          :href="
                            route('teams.show', $page.props.auth.user.current_team)
                          "
                        >
                          Team Settings
                        </jet-dropdown-link>

                        <jet-dropdown-link
                          :href="route('teams.create')"
                          v-if="$page.props.jetstream.canCreateTeams"
                        >
                          Create New Team
                        </jet-dropdown-link>

                        <div class="border-t border-gray-100"></div>

                        <!-- Team Switcher -->
                        <div class="block px-4 py-2 text-xs text-gray-400">
                          Switch Teams
                        </div>

                        <template
                          v-for="team in $page.props.auth.user.all_teams"
                          :key="team.id"
                        >
                          <form @submit.prevent="switchToTeam(team)">
                            <jet-dropdown-link as="button">
                              <div class="flex items-center">
                                <svg
                                  v-if="
                                    team.id == $page.props.auth.user.current_team_id
                                  "
                                  class="mr-2 h-5 w-5 text-green-400"
                                  fill="none"
                                  stroke-linecap="round"
                                  stroke-linejoin="round"
                                  stroke-width="2"
                                  stroke="currentColor"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                                  ></path>
                                </svg>
                                <div>{{ team.name }}</div>
                              </div>
                            </jet-dropdown-link>
                          </form>
                        </template>
                      </template>
                    </div>
                  </template>
                </jet-dropdown>
              </div>

              <!-- Settings Dropdown -->
              <div class="ml-3 relative">
                <jet-dropdown align="right" width="48">
                  <template #trigger>
                    <button
                      v-if="$page.props.jetstream.managesProfilePhotos"
                      class="
                        flex
                        text-sm
                        border-2 border-transparent
                        rounded-full
                        focus:outline-none focus:border-gray-300
                        transition
                      "
                    >
                      <img
                        class="h-8 w-8 rounded-full object-cover"
                        :src="$page.props.auth.user.profile_photo_url"
                        :alt="$page.props.auth.user.name"
                      />
                    </button>

                    <span v-else class="inline-flex rounded-md">
                      <button
                        type="button"
                        class="
                          inline-flex
                          items-center
                          px-3
                          py-2
                          border border-transparent
                          text-sm
                          leading-4
                          font-medium
                          rounded-md
                          text-gray-500
                          bg-white
                          hover:text-gray-700
                          focus:outline-none
                          transition
                        "
                      >
                        {{ $page.props.auth.user.name }}

                        <svg
                          class="ml-2 -mr-0.5 h-4 w-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                        >
                          <path
                            fill-rule="evenodd"
                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                            clip-rule="evenodd"
                          />
                        </svg>
                      </button>
                    </span>
                  </template>

                  <template #content>
                    <!-- Account Management -->
                    <div class="block px-4 py-2 text-xs text-gray-400">
                      Manage Account
                    </div>

                    <jet-dropdown-link :href="route('profile.show')">
                      Profile
                    </jet-dropdown-link>

                    <jet-dropdown-link
                      :href="route('api-tokens.index')"
                      v-if="$page.props.jetstream.hasApiFeatures"
                    >
                      API Tokens
                    </jet-dropdown-link>

                    <div class="border-t border-gray-100"></div>

                    <!-- Authentication -->
                    <form @submit.prevent="logout">
                      <jet-dropdown-link as="button">
                        Log Out
                      </jet-dropdown-link>
                    </form>
                  </template>
                </jet-dropdown>
              </div>
            </div>

            <!-- Hamburger -->
            <div class="-mr-2 flex items-center sm:hidden">
              <button
                @click="showingNavigationDropdown = !showingNavigationDropdown"
                class="
                  inline-flex
                  items-center
                  justify-center
                  p-2
                  rounded-md
                  text-gray-400
                  hover:text-gray-500 hover:bg-gray-100
                  focus:outline-none focus:bg-gray-100 focus:text-gray-500
                  transition
                "
              >
                <svg
                  class="h-6 w-6"
                  stroke="currentColor"
                  fill="none"
                  viewBox="0 0 24 24"
                >
                  <path
                    :class="{
                      hidden: showingNavigationDropdown,
                      'inline-flex': !showingNavigationDropdown,
                    }"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M4 6h16M4 12h16M4 18h16"
                  />
                  <path
                    :class="{
                      hidden: !showingNavigationDropdown,
                      'inline-flex': showingNavigationDropdown,
                    }"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>

        <!-- Responsive Navigation Menu -->
        <div
          :class="{
            block: showingNavigationDropdown,
            hidden: !showingNavigationDropdown,
          }"
          class="sm:hidden"
        >
          <div class="pt-2 pb-3 space-y-1">
            <jet-responsive-nav-link
              :href="route('dashboard')"
              :active="route().current('dashboard')"
            >
              Dashboard
            </jet-responsive-nav-link>
          </div>

          <!-- Responsive Settings Options -->
          <div class="pt-4 pb-1 border-t border-gray-200">
            <div class="flex items-center px-4">
              <div
                v-if="$page.props.jetstream.managesProfilePhotos"
                class="shrink-0 mr-3"
              >
                <img
                  class="h-10 w-10 rounded-full object-cover"
                  :src="$page.props.auth.user.profile_photo_url"
                  :alt="$page.props.auth.user.name"
                />
              </div>

              <div>
                <div class="font-medium text-base text-gray-800">
                  {{ $page.props.auth.user.name }}
                </div>
                <div class="font-medium text-sm text-gray-500">
                  {{ $page.props.auth.user.email }}
                </div>
              </div>
            </div>

            <div class="mt-3 space-y-1">
              <jet-responsive-nav-link
                :href="route('profile.show')"
                :active="route().current('profile.show')"
              >
                Profile
              </jet-responsive-nav-link>

              <jet-responsive-nav-link
                :href="route('api-tokens.index')"
                :active="route().current('api-tokens.index')"
                v-if="$page.props.jetstream.hasApiFeatures"
              >
                API Tokens
              </jet-responsive-nav-link>

              <!-- Authentication -->
              <form method="POST" @submit.prevent="logout">
                <jet-responsive-nav-link as="button">
                  Log Out
                </jet-responsive-nav-link>
              </form>

              <!-- Team Management -->
              <template v-if="$page.props.jetstream.hasTeamFeatures">
                <div class="border-t border-gray-200"></div>

                <div class="block px-4 py-2 text-xs text-gray-400">
                  Manage Team
                </div>

                <!-- Team Settings -->
                <jet-responsive-nav-link
                  :href="route('teams.show', $page.props.auth.user.current_team)"
                  :active="route().current('teams.show')"
                >
                  Team Settings
                </jet-responsive-nav-link>

                <jet-responsive-nav-link
                  :href="route('teams.create')"
                  :active="route().current('teams.create')"
                  v-if="$page.props.jetstream.canCreateTeams"
                >
                  Create New Team
                </jet-responsive-nav-link>

                <div class="border-t border-gray-200"></div>

                <!-- Team Switcher -->
                <div class="block px-4 py-2 text-xs text-gray-400">
                  Switch Teams
                </div>

                <template
                  v-for="team in $page.props.auth.user.all_teams"
                  :key="team.id"
                >
                  <form @submit.prevent="switchToTeam(team)">
                    <jet-responsive-nav-link as="button">
                      <div class="flex items-center">
                        <svg
                          v-if="team.id == $page.props.auth.user.current_team_id"
                          class="mr-2 h-5 w-5 text-green-400"
                          fill="none"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                          ></path>
                        </svg>
                        <div>{{ team.name }}</div>
                      </div>
                    </jet-responsive-nav-link>
                  </form>
                </template>
              </template>
            </div>
          </div>
        </div>
      </nav>

      <!-- Page Heading -->
      <header class="bg-white shadow" v-if="$slots.header">
        <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <slot name="header"></slot>
        </div>
      </header>

      <!-- Page Content -->
      <main>
        <slot></slot>
      </main>
    </div>
  </div>
</template>

<script>
/* Main Functions */
import { defineComponent, ref } from "vue";
import { Head, Link } from "@inertiajs/vue3";
import { library } from "@fortawesome/fontawesome-svg-core";
import darkModeFn from "@/Function/darkMode";

/* Components */
import Logo from "@/Components/Icon/Logo.vue";
import JetBanner from "@/Jetstream/Banner.vue";
import JetApplicationMark from "@/Jetstream/ApplicationMark.vue";
import JetDropdown from "@/Jetstream/Dropdown.vue";
import JetDropdownLink from "@/Jetstream/DropdownLink.vue";
import JetNavLink from "@/Jetstream/NavLink.vue";
import JetResponsiveNavLink from "@/Jetstream/ResponsiveNavLink.vue";
import {
  faCog,
  faSearch,
  faLevelUpAlt,
  faTimes,
} from "@fortawesome/free-solid-svg-icons";

/* Inputs */
import InputText from "primevue/inputtext";

/* Multi-language */
import { useI18n } from "vue-i18n";
import langChooserFn from "@/Function/langChooser";
import { languages, flags, authTranslates } from "@/Lang/languages";

library.add(faCog, faSearch, faLevelUpAlt, faTimes);

export default defineComponent({
  props: {
    title: String,
  },

  components: {
    Head,
    Logo,
    InputText,
    JetBanner,
    JetApplicationMark,
    JetBanner,
    JetDropdown,
    JetDropdownLink,
    JetNavLink,
    JetResponsiveNavLink,
    Link,
  },

  setup() {
    /* Dark Mode */
    const { darkMode } = darkModeFn();

    /* Multi-language */
    const { changeLang, locale, loadingTranslations } = langChooserFn();

    const languageList = languages;

    const { t, tm } = useI18n({
      inheritLocale: true,
      messages: authTranslates,
    });

    const langSelector = ref();
    const showLanguagesPanel = (event) => {
      langSelector.value.toggle(event);
    };

    /* Search Bar */
    const searchText = ref("");
    const showSearchBar = ref(false);

    return {
      darkMode,
      /* Language */
      t,
      tm,
      languageList,
      showLanguagesPanel,
      changeLang,
      /* Search */
      searchText,
      showSearchBar,
    };
  },

  data() {
    return {
      showingNavigationDropdown: false,
    };
  },

  methods: {
    switchToTeam(team) {
      this.$inertia.put(
        route("current-team.update"),
        {
          team_id: team.id,
        },
        {
          preserveState: false,
        }
      );
    },

    logout() {
      this.$inertia.post(route("logout"));
    },
  },
});
</script>

<style scoped>
.darkTransition-enter-active,
.darkTransition-leave-active {
  transition: all 500ms ease-in-out;
}

.darkTransition-enter-from {
  opacity: 0;
  transform: translateX(0.5rem) scale(0) rotateZ(-360deg);
}

.darkTransition-leave-to {
  opacity: 0;
  transform: translateX(-0.5rem) scale(0) rotateZ(360deg);
}

.darkTransition-leave-from {
  opacity: 1;
  transform: translateX(0.5rem);
}

.darkTransition-enter-to {
  opacity: 1;
  transform: translateX(-0.5rem);
}
</style>


================================================
FILE: resources/js/Layouts/AppLayout.vue
================================================
<template>
    <!--Browser Title-->
    <Head :title="title" />
    <!--TODO: Convert to Announcement Bar Component(TA-23)-->
    <jet-banner />
    <!--Main Container-->
    <div class="main-container">
        <!--Main Menu -->
        <main-menu/>
        <!--Content Container-->
        <div class="content-wrapper">
            <!--Top Menu-->
            <top-menu/>
            <!--TODO: Sync with Popup Menu-->
            <!--Content-->
            <div class="content-container">
                <!--Content Header-->
                <div class="container-header">
                    <!--Page Header-->
                    <header class="page-header">
                        <!--Page Title-->
                        <h1 v-if="hasSlot('header') || header" class="page-title">
                            <slot v-if="hasSlot('header')" name="header" />
                            <span v-else v-text="header" />
                        </h1>
                        <!--Page SubTitle-->
                        <h2 v-if="hasSlot('subHeader') || subHeader" class="page-subtitle">
                            <slot v-if="hasSlot('subHeader')" name="subHeader"></slot>
                            <span v-else v-text="subHeader" />
                        </h2>
                    </header>
                    <!--Page Action Buttons-->
                    <div v-if="hasSlot('action-buttons')" class="page-action-buttons">
                        <slot name="action-buttons"></slot>
                    </div>
                </div>
                <!--Breadcrumb-->
                <slot name="breadcrumb"></slot>
                <!--Content-->
                <main class="flex flex-col flex-grow">
                    <!--Flash Messages-->
                    <div v-if="$page.props.flash.message" class="alert">
                        <t-alert :color="$page.props.flash.message.type" :timer="5000" class="my-2">
                            <span v-html="$page.props.flash.message.content"></span>
                        </t-alert>
                    </div>
                    <slot></slot>
                </main>
                <!--Toastr Notifications-->
                <div v-if="$page.props.flash.toastr">
                    <t-toastr
                        :key="$page.props.flash.toastr.content"
                        :closeable="true"
                        :color="$page.props.flash.toastr.type"
                        :position="$page.props.flash.toastr.position"
                        :timer="3000"
                    >
                        <span v-html="$page.props.flash.toastr.content"></span>
                    </t-toastr>
                </div>
            </div>
            <footer v-if="footerConf.visible" class="footer">
                <span class="mt-1 space-x-1 select-none" v-html="footerConf.content" />
            </footer>
        </div>
    </div>
    <!--Modals-->
    <teleport to="body"></teleport>
</template>

<script>
/*Main Functions*/
import { defineComponent, provide, ref, useSlots } from "vue";
import {Head} from "@inertiajs/vue3";
import {breakpointsTailwind, useBreakpoints} from '@vueuse/core'

/*Components*/
import JetBanner from "@/Jetstream/Banner.vue";
import MainMenu from "@/Layouts/MainMenu.vue";
import TAlert from "@/Components/Alert/TAlert.vue";
import TToastr from "@/Components/Toastr/TToastr.vue";
import TopMenu from "@/Layouts/TopMenu/TopMenu.vue";

/*Sources*/
import {appConf, footerConf} from "@/config";
import windowSizeCalculator from "@/Functions/windowSizeCalculator";

/*Multi Language*/
import { useI18n } from "vue-i18n";
import { useDarkModeStore } from "@/Stores/darkMode";
import { storeToRefs } from "pinia";

export default defineComponent({
    components: {
        TopMenu,
        Head,
        TToastr,
        MainMenu,
        JetBanner,
        TAlert
    },
    props: {
        title: {
            type: String,
            default: null
        },
        header: {
            type: String,
            default: null
        },
        subHeader: {
            type: String,
            default: null
        }
    },
    setup(props, { slots }) {
        /*Definitions*/
        const { deviceType } = windowSizeCalculator();

        /*Dark Mode*/
        const darkModeStore= useDarkModeStore();
        const { changeThemeUser} = storeToRefs(darkModeStore);

        /*Multi Language*/
        const { t } = useI18n();

        /*Providers*/
        provide("breakpoints", ref(useBreakpoints(breakpointsTailwind)));
        provide("appearingMode", ref(darkModeStore.appearingMode));
        provide("appConf", ref(appConf));


        /*Slot Check*/
        const hasSlot = name => !!useSlots()[name];

        return {
            footerConf,
            deviceType,
            t,
            hasSlot
        };
    }
});
</script>


================================================
FILE: resources/js/Layouts/FullScreenLayout.vue
================================================
<template>
    <div class="full-screen-card">
        <div :class="[
            'full-screen-card-container',
            bgColor
        ]" :style="[bgImageUrl && { backgroundImage: 'url(' + bgImageUrl + ')' }]">
        </div>
        <div class="full-screen-card-content">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
defineProps({
    bgImageUrl: {
        type: String,
        default: null
    },
    bgColor: {
        type: Array,
        default: null
    }
});
</script>


================================================
FILE: resources/js/Layouts/GridSection.vue
================================================
<template>
  <div class="col-span-full w-full">
    <div
        :class="[
            'grid w-full grid-flow-row',
            gapStyle[gap],
            calculatedGridStyle
            ]">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import {defineComponent} from "vue";
import {gridStyleMixin} from "@/Mixins/Styles/gridStyleMixin";

export default defineComponent({
  name: "GridSection",
  mixins: [gridStyleMixin],
})
</script>


================================================
FILE: resources/js/Layouts/InitialVerticalMenu.vue
================================================
<template>
    <div>
        <div
            :class="[
                'ivm',
                menuStyle,
                radiusStyle,
                $slots.hasOwnProperty('subContent') ? 'justify-between':'justify-start'
                ]"
        >
            <div class="ivm-container">
                <template v-for="(item,index) in menu">

                    <Link
                        v-if="item.link"
                        :href="
            item.link != null ?
            item.linkType === 'route' ? route(item.link) :
            item.linkType === 'internal' ? URL(item.link) :
            item.linkType === 'external' ? item.link : '' : ''"

                        :key="index"
                        :active="
                          item.link !== null ?
                          item.linkType === 'route' ? route().current(item.link) :
                          item.linkType === 'internal' ? URL().current(item.link) : '' : ''
                          "
                        :class="[
                        'ivm-item',
                        itemStyle,
                        radiusStyle,
                        menu.length !== index+1 ? '' : item.activeColor ?
                '' :
                  'font-bold'
                        ]"
                    >

                        <icon v-if="item.icon" :icon="item.icon" size="lg"/>
                        {{ item.label }}
                    </Link>

                </template>
            </div>
            <div v-if="$slots.hasOwnProperty('subContent')" class="px-3 text-2xl text-gray-700">
                <slot name="subContent"></slot>
            </div>
        </div>
    </div>
</template>

<script>
import {defineComponent} from "vue";
import {Link} from '@inertiajs/vue3';
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";

export default defineComponent({
    name: 'InitialVerticalMenu',
    components: {
        Link
    },
    props: {
        color: {
            type: String,
            default: 'gray'
        },
        position: {
            type: String,
            require: true,
            default: 'left'
        },
        menu: {
            type: Array,
            require: true
        }
    },
    mixins: [radiusSizeMixin],
    computed: {
        menuStyle() {
            if (this.color !== 'black' && this.color !== 'white') {
                return 'bg-' + this.color + '-300';
            } else if (this.color === 'black') {
                return 'bg-black text-white transition duration-300'
            } else if (this.color === 'white') {
                return 'bg-white border border-gray-300 text-gray-700'
            }
        },
        itemStyle() {
            if (this.color !== 'black' && this.color !== 'white') {
                return 'bg-' + this.color + '-400 text-' + this.color + '-600 hover:text-white border-' + this.color + '-400 transition duration-300 ease-in-out';
            } else if (this.color === 'black') {
                return 'bg-black text-white transition duration-300'
            } else if (this.color === 'white') {
                return 'bg-white border border-gray-300 text-gray-700'
            }
        }
    }
})
</script>


================================================
FILE: resources/js/Layouts/LockScreen.vue
================================================
<template>
    <t-lock
        color="gradient-purple-to-pink"
        :radius="5"
        bg-image="/img/samples/bgFakurianDesign-nY14Fs8pxT8-unsplash.jpg"
        button-color="pink"
    >
    </t-lock>
</template>

<script>
import {defineComponent} from "vue";
import TLock from "@/Components/Auth/TLock";

export default defineComponent({
    name: "LockScreen",
    components: {TLock}
})
</script>


================================================
FILE: resources/js/Layouts/MainMenu/Abay/MainMenu.vue
================================================
<script setup>
/*Functions*/
import {ref, onBeforeMount, inject, watch} from "vue";
import {Link, usePage} from "@inertiajs/vue3";
import {onClickOutside} from '@vueuse/core'

defineEmits(['updateMainMenuStatus'])

/*Sources*/
import MainMenuLinks from "@/Sources/mainMenuLinks";
import UserMenu from "@/Layouts/MainMenu/Abay/UserMenu.vue";
import {appConf, mainMenuConf} from "@/config";
import {menuStatus} from "@/Functions/menuTrigger";

const {mainMenuLinks, mainMenuFooterLinks} = MainMenuLinks({
    roles: usePage().props.user_extra.roles,
    permissions: usePage().props.user_extra.permissions
});

const activeMainLink = ref([null, null, null]);

/*Main-menu - Variables*/
const appearingMode = inject("appearingMode");
onBeforeMount(() => {
    mainMenuLinks.value.forEach(ml => {
        if (ml.hasOwnProperty('links')) {
            ml.links.find(sl => {
                /*Active Main-link*/
                if(ml.link === route().current()){
                    activeMainLink.value[0] = ml.id
                }

                /*Active Sub-link*/
                if (sl.link === route().current()) {
                    activeMainLink.value[0] = ml.id
                    activeMainLink.value[1] = sl.id
                }

                /*Active Third-link*/
                if (sl.hasOwnProperty('links')) {
                    sl.links.find(tl => {
                        if (tl.link === route().current()) {
                            activeMainLink.value[0] = ml.id
                            activeMainLink.value[1] = sl.id
                            activeMainLink.value[2] = tl.id
                        }
                    })
                }
            })
        }
    })
})

/*Sub-menu - Variables*/
const subMenu = ref(null)
const showSubMenu = ref();

/*Submenu - Visibility*/
onClickOutside(subMenu, (event) => showSubMenu.value = false)

/*Third-menu */
const thirdMenu = ref(null)
onClickOutside(thirdMenu, (event) => activeMainLink.value[2] = null)

/*Watch Window Size*/
const breakpoints = inject('breakpoints');

watch(breakpoints.value, (newValue) => {

    if (newValue.smaller('md').value) {
        menuStatus.value = 'hidden'
        showSubMenu.value = false;
    }

    if (newValue.greater('md').value) {
        menuStatus.value = 'opened'
    }
})

</script>

<template>
    <div
        class="abay-main-menu"
        :class="{
        'border-r': showSubMenu,
        'abay-main-menu-show' : menuStatus === 'opened',
        'abay-main-menu-hide' : menuStatus === 'hidden',
        }"
    >
        <!-- Logo -->
        <Link :href="route('/')" class="h-16 w-16 text-rose-600 my-4 mx-auto">
            <img :src="[
                        appearingMode === 'dark' ? mainMenuConf.abay.logo.dark ? mainMenuConf.abay.logo.dark : appConf.logo.dark :
                        mainMenuConf.abay.logo.light ? mainMenuConf.abay.logo.light : appConf.logo.light
                    ]"/>
        </Link>

        <!-- Main Links -->
        <div
            class="flex flex-col flex-grow space-y-[.25rem] overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-rose-500 scrollbar-track-slate-200 overscroll-x-none pr-4 -mr-4 scroll-smooth">

            <!-- Link -->
            <template v-for="link in mainMenuLinks" :key="link.id">
                <div
                    @click="activeMainLink[0] = link.id; showSubMenu=true"
                    class="abay-main-menu-root-wrapper"
                    :class="{ 'bg-rose-500 text-gray-50': activeMainLink[0] === link.id }"
                >
                    <!--Dropdown-->

                    <div
                        v-if="link.type === 'dropdown'"
                        class="abay-main-menu-root-link"
                    >
                            <!-- Icon -->
                            <icon v-if="link.icon" :icon="link.icon" class="w-6 h-6"/>

                            <!-- Label -->
                            <span class="text-[.65rem]" v-text="link.label"/>
                    </div>

                    <!--Internal Route Link-->
                    <Link
                        v-if="link.type === 'route'"
                        :href="route(link.link)"
                        class="abay-main-menu-root-link"
                    >

                        <!-- Icon -->
                        <icon v-if="link.icon" :icon="link.icon" class="w-6 h-6"/>

                        <!-- Label -->
                        <span class="text-[.65rem]" v-text="link.label"/>
                    </Link>

                    <!--External Link-->
                    <a
                        v-if="link.type === 'simple-link'"
                        class="abay-main-menu-root-link"
                        :href="link.link"
                        :target="!!link.target"
                        :key="link.id"
                    >
                        <!-- Icon -->
                        <icon v-if="link.icon" :icon="link.icon" class="w-6 h-6"/>

                        <!-- Label -->
                        <span class="text-[.65rem]" v-text="link.label"/>
                    </a>

                </div>
            </template>
        </div>

        <!--Footer Links-->
        <template v-for="link in mainMenuFooterLinks" :key="link.id">
            <div
                class="flex flex-shrink-0 justify-center items-center h-12 w-12 mx-auto bg-slate-100/10 mb-4 rounded-full">

                <!--Internal Route Link-->
                <Link
                    v-if="link.linkType === 'route'"
                    id="footer-link"
                    :href="route(link.link)"
                    :key="link.id"
                >
                    <icon v-if="link.icon" :icon="link.icon" class="mt-1 w-6 h-6"/>
                </Link>
                <!--External Link-->
                <a
                    v-else
                    id="footer-link"
                    :href="link.link"
                    :target="!!link.target"
                    :key="link.id"
                >
                    <icon v-if="link.icon" :icon="link.icon" class="mt-1 w-6 h-6"/>
                </a>
            </div>
        </template>

        <!-- User Menu -->
        <div class="flex items-center justify-center">
            <user-menu/>
        </div>
    </div>
    <!-- Sub Links -->

    <div
        v-if="activeMainLink[0]"
        class="absolute z-10 flex h-full flex-col px-4 -mb-4 w-56 bg-gradient-to-tl from-slate-700/90 to-slate-800  text-gray-50"
        :class="[
            showSubMenu ? 'left-28' : '-left-56',
            'transition-all duration-700'
        ]"
        ref="subMenu"
    >
        <!-- Firm Info -->
        <div class="flex flex-col h-20 justify-center items-center">
            <!-- Firm Name -->
            <span class="text-2xl font-bold"
                  v-html="mainMenuConf.appName ? mainMenuConf.appName : appConf.appName"
            />
            <!-- Firm Slogan -->
            <span class="text-xs font-semibold text-center" v-html="mainMenuConf.catchPhrase ? mainMenuConf.catchPhrase : appConf.catchPhrase"/>
        </div>

        <!-- Sub Links -->
        <div v-if="activeMainLink[0]" class="mt-6 space-y-[.25rem]" ref="thirdMenu"
        >
            <!-- Sub Link -->
            <template v-for="subLink in mainMenuLinks.find(l=>l.id === activeMainLink[0]).links" :key="subLink">
                <div
                    class="relative p-2 rounded-md hover:bg-slate-400/50 cursor-pointer text-sm"
                    :class="[
                        {'bg-rose-500' : activeMainLink[1] === subLink.id},
                        ]"
                >
                    <!--Dropdown-->

                    <div
                        v-if="subLink.type === 'dropdown'"
                        class="relative flex justify-between items-center cursor-default"
                    >

                        <div class="flex space-x-2 items-center">

                            <!-- Icon -->
                            <icon v-if="subLink.icon" :icon="subLink.icon"/>

                            <!-- Label -->
                            <span v-text="subLink.label"/>
                        </div>

                        <!--Dropdown Icon-->
                        <div
                            class="px-2 cursor-pointer"
                            @click="activeMainLink[2] = activeMainLink[2] === subLink.id ? null : subLink.id"
                        >
                            <icon
                                v-if="subLink.hasOwnProperty('links')"
                                icon="ellipsis-vertical" size="sm"
                            />
                        </div>
                    </div>

                    <!--Internal Route Link-->
                    <Link
                        v-if="subLink.type === 'route'"
                        :href="route(subLink.link)"
                        class="flex space-x-2 items-center"
                    >

                        <!-- Icon -->
                        <icon v-if="subLink.icon" :icon="subLink.icon"/>

                        <!-- Label -->
                        <span v-text="subLink.label"/>
                    </Link>

                    <!--External Link-->
                    <a
                        v-if="subLink.type === 'simple-link'"
                        class="flex space-x-2 items-center"
                        :href="subLink.link"
                        :target="!!subLink.target"
                        :key="subLink.id"
                    >
                        <!-- Icon -->
                        <icon v-if="subLink.icon" :icon="subLink.icon"/>

                        <!-- Label -->
                        <span v-text="subLink.label"/>
                    </a>

                    <!--Third Menu-->
                    <div
                        v-if="activeMainLink[2] === subLink.id"
                        class="absolute z-50 top-10 -left-0 flex flex-col p-2 space-y-2 w-full rounded-md bg-white bg-slate-700 bg-opacity-[.97]">
                        <template
                            v-for="thirdLink in subLink.links"
                            :key="thirdLink"
                        >

                            <div class="p-1 rounded-md" :class="[
                        {'bg-rose-500' : route().current(thirdLink.link)}
                        ]">
                                <!--Internal Route Link-->
                                <Link
                                    v-if="thirdLink.type === 'route'"
                                    :href="route(thirdLink.link)"
                                    class="flex space-x-2 items-center"
                                >

                                    <!-- Icon -->
                                    <icon v-if="thirdLink.icon" :icon="thirdLink.icon"/>

                                    <!-- Label -->
                                    <span v-text="thirdLink.label"/>
                                </Link>

                                <!--External Link-->
                                <a
                                    v-if="thirdLink.type === 'simple-link'"
                                    class="flex space-x-2 items-center"
                                    :href="thirdLink.link"
                                    :target="!!thirdLink.target"
                                    :key="thirdLink.id"
                                >
                                    <!-- Icon -->
                                    <icon v-if="thirdLink.icon" :icon="thirdLink.icon"/>

                                    <!-- Label -->
                                    <span v-text="thirdLink.label"/>
                                </a>
                            </div>

                        </template>
                    </div>

                </div>
            </template>
        </div>
    </div>
</template>


================================================
FILE: resources/js/Layouts/MainMenu/Abay/UserMenu.vue
================================================
<template>

</template>

<script>
export default {
    name: "UserMenu"
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Layouts/MainMenu/Umay/MainMenu.vue
================================================
<script setup>
/*Functions*/
import {inject, provide, ref, watch} from "vue";
import {Link, usePage} from "@inertiajs/vue3";
import {menuStatus, updateMenuStatus} from "@/Functions/menuTrigger";

/*Sources*/
import MainMenuLinks from "@/Sources/mainMenuLinks";
import {appConf, mainMenuConf} from "@/config";
import MainMenuItem from "@/Layouts/MainMenu/Umay/MainMenuItem.vue";

const {mainMenuLinks, mainMenuFooterLinks} = MainMenuLinks({
    roles: usePage().props.user_extra.roles,
    permissions: usePage().props.user_extra.permissions
});

/*Menu - Variables*/
const selectedLink = ref([]);
provide('selectedLink', selectedLink);
const appearingMode = inject("appearingMode");

/*Watch Window Size*/
const breakpoints =  inject('breakpoints');

watch(breakpoints.value, (newValue) => {

    if (newValue.smaller('md').value) {
        menuStatus.value = 'hidden'
    }

    if (newValue.greater('md').value) {
        menuStatus.value = 'opened'
    }
})

</script>

<template>
    <aside
        class="umay-main-menu"
        :class="{
        'umay-main-menu-show' : menuStatus === 'opened',
        'umay-main-menu-hide' : menuStatus === 'hidden',
        'umay-main-menu-fold' : menuStatus === 'closed',
        }"
    >
        <!--Logo-->
        <div
            class="header"
            :class="[
        mainMenuConf.umay.logoAreaClasses ? mainMenuConf.umay.logoAreaClasses : appConf.logoAreaClasses,
        `radius-${mainMenuConf.umay.logoAreaRadius ? mainMenuConf.umay.logoAreaRadius : appConf.radius}`
        ]"
        >
            <Link
                :href="route('/')"
                class="logo-out-container"
            >
                <div
                    class="logo-inside-container"
                    :class="menuStatus === 'closed' && 'ml-1'"
                >
                    <!--TODO: Title and Logo will come from DB-->
                    <!--Logo-->
                    <img
                        :src="[
                        appearingMode === 'dark' ? mainMenuConf.umay.logo.dark ? mainMenuConf.umay.logo.dark : appConf.logo.dark :
                        mainMenuConf.umay.logo.light ? mainMenuConf.umay.logo.light : appConf.logo.light
                    ]"
                        :class="mainMenuConf.umay.logoClasses"
                    />
                    <!--Title-->
                    <div
                        id="logo-title"
                        v-html="mainMenuConf.appName ? mainMenuConf.appName : appConf.appName"
                        :class="[
                            menuStatus !== 'closed' ? 'umay-main-menu-title-show' : 'umay-main-menu-title-hide',
                            mainMenuConf.umay.appNameClasses
                            ]"
                    />
                </div>
            </Link>
        </div>

        <!--Menu Items-->
        <nav id="links-wrapper">
            <template v-for="link in mainMenuLinks" :key="link.id">
                <main-menu-item
                    :link="link"
                    @selected="selectedLink = $event"
                />
            </template>
        </nav>
        <!--Menu Footer-->
        <div id="footer">
            <transition name="fade" mode="out-in">
                <!--Settings-->
                <div
                    key="mainMenuFooterLinks"
                    id="footer-links-wrapper"
                    v-if="mainMenuFooterLinks.length>0 && menuStatus !== 'closed'"
                    :class="[
            mainMenuFooterLinks.length>1 ? 'grid-cols-2' : '',
            `radius-${mainMenuConf.umay.radius ? mainMenuConf.umay.radius : appConf.radius}`
            ]"
                >
                    <!--Footer Links-->
                    <template v-for="link in mainMenuFooterLinks">
                        <!--Internal Route Link-->
                        <Link
                            v-if="link.linkType === 'route'"
                            id="footer-link"
                            :class="mainMenuFooterLinks.length>2 ? 'justify-start' : 'justify-center'"
                            :href="route(link.link)"
                            :key="link.id"
                        >
                            <icon v-if="link.icon" :icon="link.icon"/>
                            <span v-text="link.label ? link.label : link.label"/>
                        </Link>
                        <!--External Link-->
                        <a
                            v-else
                            id="footer-link"
                            :class="mainMenuFooterLinks.length>2 ? 'justify-start' : 'justify-center'"
                            :href="link.link"
                            target="_blank"
                            :key="link.id"
                        >
                            <icon v-if="link.icon" :icon="link.icon"/>
                            <span v-text="link.label ? link.label : link.label"/>
                        </a>
                    </template>
                </div>
                <!--Open Menu Arrow-->
                <div
                    key="mainMenuOpenArrow"
                    v-else
                    id="footer-trigger"
                    @click="updateMenuStatus"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="umay-main-menu-trigger-icon" fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M13 5l7 7-7 7M5 5l7 7-7 7"/>
                    </svg>
                </div>
            </transition>
        </div>
    </aside>
</template>
<style scoped>
.fade-enter-active, .fade-leave-active {
    transition: all 300ms;
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
    transform: scale(0);
}

.fade-enter-to, .fade-leave-from {
    opacity: 1;
    transform: scale(1);
}
</style>



================================================
FILE: resources/js/Layouts/MainMenu/Umay/MainMenuItem.vue
================================================
<script setup>
/*Functions*/
import {inject, onBeforeMount, defineEmits, defineProps, computed, reactive} from "vue";
import {Link} from '@inertiajs/vue3';
import {menuStatus, updateMenuStatus} from "@/Functions/menuTrigger";


/*Sources*/
import {appConf, mainMenuConf} from "@/config";

/*Variables*/
const emit = defineEmits(['selected'])
const props = defineProps({
    link: {
        type: Object,
        default: null
    }
})

const selectedLink = inject('selectedLink');
const activeMenus = reactive({
    root: null,
    second: null,
    third: null
});

/*Select Active Link*/
const select = (selection) => {

    if (selectedLink.value[0] === selection[0] && selection.length === 1 && menuStatus !== 'opened') {
        emit('selected', [])
    } else if (selectedLink.value[0] === selection[0] && selectedLink.value[1] === selection[1] && selection.length === 2) {
        emit('selected', selection.splice(0, 1))
    } else {
        emit('selected', selection)
    }

}

/*Search Active Link*/
onBeforeMount(() => {
    if (props.link["links"]) {
        for (let child of props.link["links"]) {

            /*Check Second Level*/
            if (route().current(child.link) && child.link !== null && !child["links"]) {
                activeMenus.root = props.link.id
                activeMenus.second = child.id
                select([props.link.id, child.id])
            }

            /*Check Third Level*/
            if (child["links"]) {
                for (let third of child["links"]) {
                    if (route().current(third.link) && third.link !== null) {
                        activeMenus.root = props.link.id
                        activeMenus.second = child.id
                        activeMenus.third = third.id
                        select([props.link.id, child.id, third.id])
                    }
                }
            }

        }
    } else {

        /*Check First Level*/
        if (route().current(props.link.link) && props.link.link !== null) {
            activeMenus.root = props.link.id
            select([props.link.id])
        }

    }
});

/*Radius Check*/
const generatedRadius = computed(() => {

    let style = {
        rootLinkClasses: {
            activeBg: null,
            normal: null,
            active: null,
        },
        secondLinkClasses: {
            activeBg: null,
            normal: null,
            active: null,
        },
        thirdLinkClasses: {
            activeBg: null,
            normal: null,
            active: null,
        },
    };
    let comparedStyle = `radius-${mainMenuConf.umay.menuRadius ? mainMenuConf.umay.menuRadius : appConf.radius}`


    let mainKeys = ['rootLinkClasses', 'secondLinkClasses', 'thirdLinkClasses']
    let subKeys = ['activeBg', 'normal', 'active']


    mainKeys.forEach((link) => {

        subKeys.forEach((subLink) => {

            mainMenuConf.umay[link][subLink].forEach(i => {

                if (!i.match(/(rounded|radius)/g)) {
                    style[link][subLink] = comparedStyle
                } else {
                    style[link][subLink] = null
                }

            })

        })
    })

    return style

})

</script>
<template>
    <!--Root Wrapper-->
    <div
        class="relative w-full font-sans text-slate-100 p-2"
        :class="[
            generatedRadius.rootLinkClasses.activeBg,
            (selectedLink.includes(link.id) && link['links'] &&menuStatus !== 'closed') && mainMenuConf.umay.rootLinkClasses.activeBg,
             ]"
    >
        <!--Root Item: Dropdown-->
        <div
            v-if="link.type === 'dropdown' && link.visibleFor !== false"
            @click="select([link.id]); menuStatus === 'closed' && updateMenuStatus()"
            class="flex justify-between items-center px-2 rounded cursor-pointer overflow-hidden transition-color duration-300 w-full"
            :class="[
                (selectedLink.includes(link.id) && menuStatus !== 'closed') || activeMenus.root === link.id ?
                [mainMenuConf.umay.rootLinkClasses.active, generatedRadius.rootLinkClasses.active] :
                [mainMenuConf.umay.rootLinkClasses.normal, generatedRadius.rootLinkClasses.normal],
                menuStatus !== 'closed' ? 'h-12 space-x-2' : 'h-14 '
            ]"
        >

            <div
                class="flex items-center w-full"
                :class="{
                'space-x-2' : menuStatus !== 'closed',
                'justify-between' : menuStatus !== 'closed',
                'justify-center' : menuStatus === 'closed',
            }"
            >
                <!--Icon-->
                <div class="flex justify-center items-center w-8 h-8">
                    <icon v-if="link['icon']" :icon="link.icon"/>
                </div>
                <!--Label-->
                <span v-text="link.label"
                      class="flex whitespace-nowrap transition-size-medium"
                      :class="[
                              menuStatus !== 'closed' ? 'w-show' : 'w-hide',
                              'transition-size-medium'
                              ]"
                ></span>
            </div>
            <div>
                <icon
                    v-if="menuStatus !== 'closed'"
                    icon="chevron-down" size="sm"
                    :class="[selectedLink.includes(link.id) ? 'rotate-90' : 'rotate-0']"
                    class="mr-1 transition-size-medium"
                />
            </div>
        </div>
        <!--Root Item: Route-->
        <Link
            v-else-if="link.type === 'route' && link.visibleFor !== false"
            :href="route(link.link)"
            @click="select([link.id]); menuStatus === 'closed' && updateMenuStatus()"
            class="flex justify-between items-center px-3 rounded cursor-pointer w-full overflow-hidden transition-color duration-300"
            :class="[
                selectedLink.includes(link.id) || activeMenus.root === link.id ?
                [mainMenuConf.umay.rootLinkClasses.active, generatedRadius.rootLinkClasses.active] :
                [mainMenuConf.umay.rootLinkClasses.normal, generatedRadius.rootLinkClasses.normal],
                menuStatus !== 'closed' ? 'h-12 space-x-2' : 'h-14 '
            ]"
        >
            <div
                class="flex items-center"
                :class="menuStatus !== 'closed' && 'space-x-2'"
            >
                <!--Icon-->
                <div class="flex justify-center items-center w-8 h-8">
                    <icon v-if="link['icon']" :icon="link.icon"/>
                </div>
                <!--Label-->
                <span v-text="link.label"
                      class="whitespace-nowrap transition-size-medium"
                      :class="[
                              menuStatus !== 'closed' ? 'w-show' : 'w-hide',
                              'transition-size-medium'
                              ]"
                ></span>
            </div>
        </Link>
        <!--Root Item: Link-->
        <a
            v-else-if="link.type === 'simple-link' && link.visibleFor !== false"
            :href="link.link"
            :target="link.target"
            class="flex justify-between items-center px-3 rounded cursor-pointer w-full overflow-hidden transition-color duration-300"
            :class="[
                [mainMenuConf.umay.rootLinkClasses.normal, generatedRadius.rootLinkClasses.normal],
                menuStatus !== 'closed' ? 'h-12 space-x-2' : 'h-14 '
                ]"
        >
            <div
                class="flex items-center"
                :class="menuStatus !== 'closed' && 'space-x-2'"
            >
                <!--Icon-->
                <div class="flex justify-center items-center w-8 h-8">
                    <icon v-if="link['icon']" :icon="link.icon"/>
                </div>
                <!--Label-->
                <span v-text="link.label"
                      class="whitespace-nowrap transition-size-medium"
                      :class="[
                              menuStatus !== 'closed' ? 'w-show' : 'w-hide',
                              'transition-size-medium'
                              ]"
                ></span>
            </div>
        </a>
        <!--Secondly Item-->
        <transition name="subMenuTransition">
            <div
                v-if="link.links && (selectedLink.includes(link.id)) && menuStatus !== 'closed'"
                class="flex flex-col py-2 space-y-2 overflow-hidden"
            >
                <template v-for="subItem in link.links" :key="subItem">

                    <!--Secondly Item: Dropdown-->
                    <div
                        :key="subItem.id"
                        v-if="subItem.type === 'dropdown' && subItem.visibleFor !== false"
                        @click="select([link.id, subItem.id])"
                        class="flex justify-between items-center space-x-2 px-3 py-2 cursor-pointer rounded transition-color duration-300"
                        :class="[
                            selectedLink.includes(subItem.id) || activeMenus.second === subItem.id ?
                            [mainMenuConf.umay.secondLinkClasses.active, generatedRadius.secondLinkClasses.active] :
                            [mainMenuConf.umay.secondLinkClasses.normal, generatedRadius.secondLinkClasses.normal]
                            ]"
                    >
                        <div class="flex space-x-2 items-center">
                            <icon v-if="subItem['icon']" :icon="subItem.icon"/>
                            <span v-text="subItem.label"></span>
                        </div>
                        <icon
                            icon="chevron-down"
                            size="sm"
                            :class="[selectedLink.includes(subItem.id) ? 'rotate-90' : 'rotate-0']"
                            class="mr-1 transition-size-medium"
                        />
                    </div>

                    <!--Secondly Item: Route-->
                    <Link
                        v-else-if="subItem.type === 'route' && subItem.visibleFor !== false"
                        :href="route(subItem.link)"
                        class="flex justify-between items-center space-x-2 px-3 py-2 cursor-pointer rounded transition-color duration-300"
                        :class="[
                            selectedLink.includes(subItem.id) || activeMenus.second === subItem.id ?
                            [mainMenuConf.umay.secondLinkClasses.active, generatedRadius.secondLinkClasses.active] :
                            [mainMenuConf.umay.secondLinkClasses.normal, generatedRadius.secondLinkClasses.normal]
                            ]"
                    >
                        <div class="flex justify-between space-x-2 items-center w-full">
                            <span v-text="subItem.label"></span>
                            <icon v-if="subItem['icon']" :icon="subItem.icon"/>
                        </div>
                    </Link>

                    <!--Secondly Item: Link-->
                    <a
                        v-else-if="subItem.type === 'simple-link' && subItem.visibleFor !== false"
                        :href="subItem.link"
                        :target="subItem.target"
                        class="flex justify-between items-center px-3 rounded cursor-pointer w-full overflow-hidden transition-color duration-300"
                        :class="[
                            [mainMenuConf.umay.secondLinkClasses.normal, generatedRadius.secondLinkClasses.normal],
                            menuStatus !== 'closed' ? 'h-12 space-x-2' : 'h-14 '
                            ]"
                    >
                        <div
                            class="flex items-center"
                            :class="menuStatus !== 'closed' && 'space-x-2'"
                        >
                            <!--Icon-->
                            <div class="flex justify-center items-center w-8 h-8">
                                <icon v-if="subItem['icon']" :icon="subItem.icon"/>
                            </div>
                            <!--Label-->
                            <span v-text="subItem.label"
                                  class="whitespace-nowrap transition-size-medium"
                                  :class="[
                              menuStatus !== 'closed' ? 'w-show' : 'w-hide',
                              'transition-size-medium'
                              ]"
                            ></span>
                        </div>
                    </a>

                    <!--Third Item-->
                    <transition name="subMenuTransition">
                        <div
                            v-if="subItem.links && selectedLink.includes(subItem.id) || subItem.links && activeMenus.second === subItem.id"
                            class="flex p-2"
                            :class="[
                                generatedRadius.thirdLinkClasses.activeBg,
                                mainMenuConf.umay.thirdLinkClasses.activeBg
                                ]"
                        >
                            <div class="flex flex-col space-y-4 w-full">
                                <template v-for="thirdItem in subItem.links" :key="thirdItem">
                                    <!--Third: Route-->
                                    <Link :href="route(thirdItem.link)"
                                          v-if="thirdItem.type === 'route' && thirdItem.visibleFor !== false"
                                          class="flex items-center space-x-2 px-3 cursor-pointer w-full"
                                          :class="[
                                              selectedLink.includes(thirdItem.id) || activeMenus.third === thirdItem.id ?
                                              [mainMenuConf.umay.thirdLinkClasses.active, generatedRadius.thirdLinkClasses.active] :
                                              [mainMenuConf.umay.thirdLinkClasses.normal, generatedRadius.thirdLinkClasses.normal],
                                              ]"
                                    >
                                        <div class="flex justify-between space-x-2 py-2 items-center w-full">
                                            <span v-text="thirdItem.label"></span>
                                            <icon v-if="thirdItem['icon']" :icon="thirdItem.icon"/>
                                        </div>
                                    </Link>

                                    <!--Third: Link-->
                                    <a
                                        v-if="thirdItem.type === 'simple-link' && thirdItem.visibleFor !== false"
                                        :href="thirdItem.link"
                                        :target="thirdItem.target"
                                        class="flex items-center space-x-2 px-3 cursor-pointer w-full" :class="[
                                            [mainMenuConf.umay.thirdLinkClasses.normal, generatedRadius.thirdLinkClasses.normal],
                                            menuStatus !== 'closed' ? 'h-12 space-x-2' : 'h-14 '
                                            ]"
                                    >
                                        <div
                                            class="flex items-center"
                                            :class="menuStatus !== 'closed' && 'space-x-2'"
                                        >
                                            <!--Icon-->
                                            <div class="flex justify-center items-center w-8 h-8">
                                                <icon v-if="thirdItem['icon']" :icon="thirdItem.icon"/>
                                            </div>
                                            <!--Label-->
                                            <span v-text="thirdItem.label"
                                                  class="whitespace-nowrap transition-size-medium"
                                                  :class="[
                                                      menuStatus !== 'closed' ? 'w-show' : 'w-hide',
                                                      'transition-size-medium'
                                                      ]"
                                            ></span>
                                        </div>
                                    </a>
                                </template>
                            </div>
                        </div>
                    </transition>
                </template>
            </div>
        </transition>
    </div>
</template>


<style scoped>
.subMenuTransition-enter-active, .subMenuTransition-leave-active {
    transition: max-height 300ms cubic-bezier(.17, .67, .83, .67),
    opacity 300ms cubic-bezier(.17, .67, .83, .67),
    transform 300ms cubic-bezier(.17, .67, .83, .67);
}

.subMenuTransition-enter-from, .subMenuTransition-leave-to {
    transform: translateY(-1rem);
    max-height: 0;
    opacity: 0;
}

.subMenuTransition-leave-from, .subMenuTransition-enter-to {
    max-height: 75vh;
    opacity: 1;
}

</style>


================================================
FILE: resources/js/Layouts/MainMenu.vue
================================================
<script setup>
/*Functions*/
import {computed, onMounted, shallowRef} from "vue";

/*Sources*/
import {appConf, mainMenuConf} from "@/config";
const props = defineProps({
    design: {
        type: String,
        default: ""
    },
    menuStatus: {
        type: String,
        default: 'opened'
    }
})

/*Menu Designs*/
const menuDesigns = {
    umay: "Umay",
    abay: "Abay"
}

/*Validation*/
const menuDesign = computed(()=>{
    if(menuDesigns.hasOwnProperty(props.design) && props.design !== ""){
        return menuDesigns[props.design];
    }
    return menuDesigns[appConf.mainMenuDesign];
})

const mainMenu = shallowRef();

onMounted(async ()=>{
    /* @vite-ignore */
    await import(`./MainMenu/${menuDesign.value}/MainMenu.vue`)
        .then((module)=>{
            mainMenu.value = module.default;
        })
        .catch((e)=>{
            console.error(e);
        })
})
</script>
<template>
    <component :is="mainMenu" />
</template>


================================================
FILE: resources/js/Layouts/TopMenu/TopMenu.vue
================================================
<script setup>
/*Functions*/
import {defineComponent, inject, provide, ref} from "vue";
import TopMenuNotification from "@/Layouts/TopMenu/TopMenuNotification.vue";
import TopMenuUserMenu from "@/Layouts/TopMenu/TopMenuUserMenu.vue";
import TLoading from "@/Components/Loading/TLoading.vue";
import TopMenuThemeSelector from "@/Layouts/TopMenu/TopMenuThemeSelector.vue";
import TopMenuLanguageSelector from "@/Layouts/TopMenu/TopMenuLanguageSelector.vue";
import {menuStatus, updateMenuStatus} from "@/Functions/menuTrigger"

/*Sources*/
import {appConf, topBarConf} from "@/config";


/*Definitions*/
const searchBar = ref(false);
/*Injections*/
const breakpoints = inject("breakpoints");
const updateMainMenuStatus = updateMenuStatus;

/*Provider*/
provide('appConf', appConf);
provide('topBarConf', topBarConf);
</script>

<template>
    <div
        class="top-menu"
        :class="`radius-${topBarConf.radius ? topBarConf.radius : appConf.radius}`"
    >
        <!--Left Menu Trigger-->
        <div
            v-if="appConf.mainMenuDesign === 'umay' || (breakpoints.smaller('md') && appConf.mainMenuDesign === 'abay')"
            @click="updateMainMenuStatus"
            class="trigger"
            :class="`radius-${topBarConf.radius ? topBarConf.radius : appConf.radius}`"
        >
            <!--Fold & Close Icon-->
            <svg
                class="trigger-icon"
                :class="[
                    (breakpoints.smaller('md') && (menuStatus === 'hidden')) || menuStatus === 'closed' ? 'trigger-icon-show' : 'trigger-icon-hide'
                ]"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
            >
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
            <!--Open Icon-->
            <svg
                class="trigger-icon"
                :class="[
                    (menuStatus === 'opened'  || menuStatus === undefined) ? 'trigger-icon-show' : 'trigger-icon-hide'
                ]"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
            >
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
            </svg>
        </div>
        <!--Search Box-->
        <div class="search-box">
            <div
                @click="searchBar=true"
                class="search-box-wrapper"
                :class="`radius-${topBarConf.radius ? topBarConf.radius : appConf.radius}`"
            >
                <svg
                    class="search-icon"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </div>
        </div>
        <!--Active Team-->
        <div class="active-team">
            <div
                v-if="$page.props.jetstream.hasTeamFeatures"
                :title="$page.props.auth.user.current_team.name"
                class="active-team-wrapper">
                <svg
                    class="umay-main-menu-icon"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
                <span
                    class="active-team-label"
                    v-text="$page.props.auth.user.current_team.name"
                />
            </div>
        </div>
        <!--Notifications-->
        <top-menu-notification/>
        <!--Theme Selector-->
        <top-menu-theme-selector/>
        <!--Language Selector-->
        <top-menu-language-selector/>
        <!--User Menu-->
        <top-menu-user-menu/>
    </div>
    <teleport to="body">
        <!--Search Bar-->
        <t-loading v-model="searchBar" color="gray" title="Search" closeable>
            <div
                class="search-modal"
                :class="`radius-${topBarConf.radius ? topBarConf.radius : appConf.radius}`"
            >
                <input type="text" id="search" :placeholder="topBarConf.searchPlaceHolderText"/>
            </div>
        </t-loading>
    </teleport>
</template>


================================================
FILE: resources/js/Layouts/TopMenu/TopMenuLanguageSelector.vue
================================================
<script setup>
/*Main functions*/
import { inject } from "vue";
import { usePage } from "@inertiajs/vue3";

/*Components*/
import TDropdown from "@/Components/Dropdown/TDropdown.vue";

/*Multi language*/
import { useDisplayLanguageStore } from "@/Stores/displayLanguage.js";
import { languages } from "@/Lang/languages";
import { useForm } from "@inertiajs/vue3";
import { storeToRefs } from "pinia";

/*Injections*/
const appConf = inject("appConf");
const topBarConf = inject("topBarConf");

/*Multi language*/
const displayLanguageStore = useDisplayLanguageStore();
const { changeLang } = displayLanguageStore;
const { locale } = storeToRefs(displayLanguageStore);

const form = useForm({
    language: usePage().props?.auth?.user?.language
});

const updatePreferredLanguage = (langId) => {
    form.language = langId;
    form.put(route("user.preferred-language.update"), {
        errorBag: "updatePreferredLanguage",
        preserveScroll: true
    });
};
</script>

<template>
    <t-dropdown align="right" trigger-type="rich">
        <template #trigger>
            <!--Selected Language-->
            <div
                class="top-menu-dropdown-trigger-transparent"
                :class="`radius-${topBarConf.radius ? topBarConf.radius : appConf.radius}`"
            >
                <component
                    :is="languages.find(i=>i.id === locale).flag"
                    class="w-6 aspect-auto drop-shadow transform hover:scale-110 active:scale-90 transition-all duration-300"
                    :alt="languages.find(i=>i.id === locale).name"
                />
            </div>
        </template>
        <template #default>
            <!--Language Lists-->
            <div class="top-menu-dropdown-content-wrapper-transparent">
                <template v-for="lang in languages" :key="lang.id">
                    <div @click="changeLang(lang.id); updatePreferredLanguage(lang.id)"
                         class="top-menu-dropdown-item-transparent">
                        <component
                            :is="lang.flag"
                            class="w-6 aspect-auto drop-shadow"
                        />
                        <span v-text="lang.name"></span>
                    </div>
                </template>
            </div>
        </template>
    </t-dropdown>
</template>


================================================
FILE: resources/js/Layouts/TopMenu/TopMenuNotification.vue
================================================
<template>
    <t-dropdown align="right" trigger-type="rich">
        <template #trigger>
            <div
                class="notification-box"
                :class="`radius-${topBarConf.radius ? topBarConf.radius : appConf.radius}`"
            >
                <!--Notification Ping-->
                <div>
                    <span class="notification-ping animate-ping" />
                    <span class="notification-ping" />
                </div>
                <!--Notification Icon-->
                <svg
                    class="notification-icon"
                    aria-hidden="true"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                    />
                </svg>
            </div>
        </template>
        <template #default>
            <div class="top-menu-dropdown-content-wrapper-transparent">
                <!--Pending Works-->
                <div class="top-menu-dropdown-header-transparent" v-text="tm('pendingWorks')" />
                <!--To-Do-->
                <button class="top-menu-dropdown-item-transparent">
                    <span v-text="tm('unfinishedTodos')"></span>
                    <t-badge color="light" design="elegant">5</t-badge>
                </button>
                <!--Messages-->
                <div class="dropdown-item-separator" />
                <button class="top-menu-dropdown-item-transparent">
                    <span v-text="tm('unreadMessages')"></span>
                    <t-badge>2</t-badge>
                </button>
            </div>
        </template>
    </t-dropdown>
</template>

<script>
/*Main functions*/
import { defineComponent, inject } from "vue";

/*Components*/
import TDropdown from "@/Components/Dropdown/TDropdown.vue";
import TBadge from "@/Components/Badge/TBadge.vue";

/* Multi-language */
import { useI18n } from "vue-i18n";
import { notificationTranslates } from "@/Lang/languages";

export default defineComponent({
    name: "TopMenuNotification",
    components: { TDropdown, TBadge },
    setup() {
        /* Multi-language */
        const { tm } = useI18n({
            inheritLocale: true,
            messages: notificationTranslates
        })
        /*Injections*/
        const appConf = inject("appConf");
        const topBarConf = inject("topBarConf");

        return {
            appConf,
            topBarConf,
            tm
        }
    }
});
</script>

<style scoped>
</style>


================================================
FILE: resources/js/Layouts/TopMenu/TopMenuThemeSelector.vue
================================================
<template>
    <div
        class="flex p-2 w-10 h-10 justify-center items-center cursor-pointer hover:bg-slate-500/10 dark:hover:bg-slate-500/50 overflow-hidden text-white  transform transition-all duration-300"
        :class="`radius-${topBarConf.radius ? topBarConf.radius : appConf.radius}`"
        @click="updateDarkModePreference()"
    >
        <transition-group name="darkTransition">
            <!-- Light -->
            <icon
                v-if="darkMode === 'light'"
                icon="sun"
                size="lg"
                key="light"
                :alt="t('lightMode')"
                class="text-yellow-500 transform hover:scale-110 active:scale-90 transition-all duration-300"
            />
            <!-- Auto -->
            <icon
                v-if="darkMode === 'auto'"
                icon="palette"
                size="lg"
                key="auto"
                :alt="t('auto')"
                class="transform hover:scale-110 active:scale-90 transition-all duration-300"
                :class="{
                    'text-gray-500' : appearingMode === 'light',
                    'text-slate-50' : appearingMode === 'dark',
                }"
            />
            <!-- Dark -->
            <icon
                v-if="darkMode === 'dark'"
                icon="moon"
                size="lg"
                key="dark"
                :alt="t('darkMode')"
                class="transform hover:scale-110 active:scale-90 transition-all duration-300"
            />
        </transition-group>
    </div>
</template>

<script setup>
/* Main Functions */
import { inject } from "vue";
import { usePage } from "@inertiajs/vue3";
import { library } from "@fortawesome/fontawesome-svg-core";
import { useDarkModeStore } from "@/Stores/darkMode";

/*Components*/
import { faSun, faMoon, faPalette } from "@fortawesome/free-solid-svg-icons";

library.add(faSun, faMoon, faPalette);

/*Multi Language*/
import { useI18n } from "vue-i18n";
import { useForm } from "@inertiajs/vue3";
import { storeToRefs } from "pinia";

/*Injections*/
const appConf = inject("appConf");
const topBarConf = inject("topBarConf");

/* Dark Mode */
const darkModeStore = useDarkModeStore();
const { changeTheme } = darkModeStore;
const { darkMode, appearingMode } = storeToRefs(darkModeStore);

/*Multi Language*/
const { t } = useI18n();

const form = useForm({
    dark_mode: usePage().props?.auth?.user?.dark_mode ?? "auto"
});

const updateDarkModePreference = () => {
    form.dark_mode = darkMode;
    form.put(route("user.dark-mode-preference.update"), {
        errorBag: "updateDarkModePreference",
        preserveScroll: true,
        onSuccess: () => {
            changeTheme();
        }
    });
};
</script>

<style scoped>
.darkTransition-enter-active,
.darkTransition-leave-active {
    transition: all 500ms ease-in-out;
}

.darkTransition-enter-from {
    opacity: 0;
    transform: translateX(5rem) translateZ(5rem) scale(0) rotateZ(-360deg);
}

.darkTransition-leave-to {
    opacity: 0;
    transform: translateX(-5rem) translateZ(-5rem) scale(0) rotateZ(360deg);
}

.darkTransition-leave-from {
    opacity: 1;
    transform: translateX(0);
}

.darkTransition-enter-to {
    opacity: 1;
    transform: translateX(0);
}
</style>


================================================
FILE: resources/js/Layouts/TopMenu/TopMenuUserMenu.vue
================================================
<template>
    <t-dropdown
        align="right"
        trigger-type="rich"
    >
        <template #trigger>
            <!--If The user has a avatar-->
            <div class="user-menu-trigger">
                <!--User Info-->
                <span class="staff-info">
                <span class="staff-name">
                  {{ $page.props.auth.user.name }}
                </span>
                <span class="staff-title">
                  {{ $page.props.auth.user.title }}
                </span>
              </span>
                <!--User Photo-->
                <t-avatar
                    v-if="$page.props.jetstream.managesProfilePhotos"
                    :alt="$page.props.auth.user.name"
                    :indicator="{
                          color:'green',
                          label : '',
                          position: 'rb'
                        }"
                    :radius="8"
                    :size="3"
                    :src="$page.props.auth.user.profile_photo_url"
                />
            </div>
        </template>
        <template #default>
            <div class="top-menu-dropdown-content-wrapper-transparent min-w-[13rem]">
                <!-- Account Management -->
                <div class="top-menu-dropdown-header border-t rounded-t" v-text="tm('manageAccount')" />

                <!--Profile-->
                <Link :href="route('profile.show')">
                    <div class="top-menu-dropdown-item" v-text="tm('profile')" />
                </Link>

                <!--API Tokens-->
                <Link v-if="$page.props.jetstream.hasApiFeatures"
                      :href="route('api-tokens.index')">
                    <div class="top-menu-dropdown-item" v-text="tm('api')" />
                </Link>

                <!-- Team Management -->
                <template v-if="$page.props.jetstream.hasTeamFeatures">
                    <div class="dropdown-item-separator" />
                    <div class="top-menu-dropdown-header" v-text="tm('manageTeam')" />

                    <!-- Team Settings -->
                    <Link :href="route('teams.show', $page.props.auth.user.current_team)">
                        <div class="top-menu-dropdown-item" v-text="tm('teamSettings')" />
                    </Link>

                    <!--Create New Team-->
                    <Link v-if="$page.props.jetstream.canCreateTeams"
                          :href="route('teams.create')">
                        <div class="top-menu-dropdown-item" v-text="tm('createNewTeam')" />
                    </Link>

                    <!-- Team Switcher -->
                    <div class="dropdown-item-separator" />
                    <div class="top-menu-dropdown-header" v-text="tm('switchTeams')" />

                    <template v-for="team in $page.props.auth.user.all_teams" :key="team.id">
                        <div class="top-menu-dropdown-item">
                            <form @submit.prevent="switchToTeam(team)">
                                <button>
                          <span class="flex items-center">
                            <svg
                                v-if="team.id === $page.props.auth.user.current_team_id"
                                class="mr-2 h-5 w-5 text-green-500"
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 20 20"
                                fill="currentColor"
                            >
                              <path
                                  fill-rule="evenodd"
                                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                  clip-rule="evenodd"
                              />
                            </svg>
                            {{ team.name }}
                          </span>

                                </button>
                            </form>
                        </div>
                    </template>


                </template>

                <!-- Authentication -->
                <div class="dropdown-item-separator" />
                <span class="logout-button border-b rounded-b" @click="logout">
                        <!--Logout Text-->
                        <span v-text="tm('logout')" />
                    <!--Logout Icon-->
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-5 w-5"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                          <path
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
                          />
                        </svg>
                      </span>
            </div>
        </template>
    </t-dropdown>
</template>

<script>
/*Main Functions*/
import { defineComponent, inject, ref } from "vue";
import { Link } from "@inertiajs/vue3";
import { router } from "@inertiajs/vue3";

/*Components*/
import TDropdown from "@/Components/Dropdown/TDropdown.vue";
import TAvatar from "@/Components/Avatar/TAvatar.vue";

/*Multi Language*/
import { useI18n } from "vue-i18n";
import { userMenuTranslates } from "@/Lang/languages";

export default defineComponent({
    name: "TopMenuUserMenu",
    components: { TAvatar, TDropdown, Link },
    setup() {
        /*Multi Language*/
        const { tm } = useI18n({
            inheritLocale: true,
            messages: userMenuTranslates
        });

        /*Switch Team Action*/
        const showTeamSelector = ref(false);
        const switchToTeam = (team) => {
            router.put(
                route("current-team.update"),
                {
                    "team_id": team.id
                }, {
                    preserveState: false
                });
        };

        /*Logout Function*/
        const logout = () => {
            router.post(
                route("logout")
            );
        };

        return {
            logout,
            switchToTeam,
            showTeamSelector,
            tm
        };
    }
});
</script>

<style scoped>
.darkModeTitle-enter-active, .darkModeTitle-leave-active {
    transition: 500ms ease-in-out;
}

.darkModeTitle-enter-from, .darkModeTitle-leave-to {
    opacity: 0;
    max-width: 0;
}

.darkModeTitle-enter-to, .darkModeTitle-leave-from {
    opacity: 1;
    max-width: 5rem;
}
</style>


================================================
FILE: resources/js/Mixins/Styles/bgColorStyles.js
================================================
export const bgColorStyles = {
    props:{
        color: {
            type: String,
            default: 'solid-white'
        },
        gradientDirection: {
            type: String,
            default: 'r'
        }
    },
    data(){
        return {
            solidColors: {
                'solid-red': 'bg-red-500 border-red-500',
                'solid-blue': 'bg-blue-500 border-blue-500',
                'solid-green': 'bg-green-500 border-green-500',
                'solid-yellow': 'bg-yellow-500 border-yellow-500',
                'solid-indigo': 'bg-indigo-500 border-indigo-500',
                'solid-pink': 'bg-pink-500 border-pink-500',
                'solid-purple': 'bg-purple-500 border-purple-500',
                'solid-gray': 'bg-gray-500 border-gray-500',
                'solid-black': 'bg-black border-black',
                'solid-white': 'bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600',
            },
            lightColors: {
                'light-red': 'bg-red-200 border border-red-500',
                'light-blue': 'bg-blue-200 border border-blue-500',
                'light-green': 'bg-green-200 border border-green-500',
                'light-yellow': 'bg-yellow-200 border border-yellow-500',
                'light-indigo': 'bg-indigo-200 border border-indigo-500',
                'light-pink': 'bg-pink-200 border border-pink-500',
                'light-purple': 'bg-purple-200 border border-purple-500',
                'light-gray': 'bg-gray-200 border border-gray-500',
            },
            gradientDirections : {
                t : 'bg-gradient-to-t',
                b : 'bg-gradient-to-b',
                l : 'bg-gradient-to-l',
                r : 'bg-gradient-to-r',
                tl : 'bg-gradient-to-tl',
                bl : 'bg-gradient-to-bl',
                tr : 'bg-gradient-to-tr',
                br : 'bg-gradient-to-br',
            },
            gradientFirstColors: {
                red: 'from-red-500',
                blue: 'from-blue-500',
                green: 'from-green-500',
                yellow: 'from-yellow-500',
                indigo: 'from-indigo-500',
                pink: 'from-pink-500',
                purple: 'from-purple-500 to-pink-700 text-gray-100',
                gray: 'from-gray-500',
                black: 'from-black',
                white: 'from-white'
            },
            gradientSecondColors: {
                red: 'to-red-700 text-gray-100',
                blue: 'to-blue-700 text-gray-100',
                green: 'to-green-700 text-gray-100',
                yellow: 'to-yellow-700 text-gray-100',
                indigo: 'to-indigo-700 text-gray-100',
                pink: 'to-pink-700 text-gray-100',
                purple: 'to-purple-700 text-gray-100',
                gray: 'to-gray-700 text-gray-100',
                black: 'to-black text-gray-100',
                white: 'to-white text-gray-700'
            },
            solidTextColors: {
                'solid-red': 'text-gray-100',
                'solid-blue': 'text-gray-100',
                'solid-green': 'text-gray-100',
                'solid-yellow': 'text-gray-100',
                'solid-indigo': 'text-gray-100',
                'solid-pink': 'text-gray-100',
                'solid-purple': 'text-gray-100',
                'solid-gray': 'text-gray-100',
                'solid-black': 'text-gray-300',
                'solid-white': 'text-gray-700 dark:text-gray-300'
            },
            lightTextColors: {
                'light-red': 'text-red-700',
                'light-blue': 'text-blue-700',
                'light-green': 'text-green-700',
                'light-yellow': 'text-yellow-700',
                'light-indigo': 'text-indigo-700',
                'light-pink': 'text-pink-700',
                'light-purple': 'text-purple-700',
                'light-gray': 'text-gray-700',
                'light-black': 'text-gray-700',
                'light-white': 'text-gray-700'
            },
            solidHoverColors: {
                'solid-red': 'hover:bg-red-100 hover:text-red-700',
                'solid-blue': 'hover:bg-blue-100 hover:text-blue-700',
                'solid-green': 'hover:bg-green-100 hover:text-green-700',
                'solid-yellow': 'hover:bg-yellow-100 hover:text-yellow-700',
                'solid-indigo': 'hover:bg-indigo-100 hover:text-indigo-700',
                'solid-pink': 'hover:bg-pink-100 hover:text-pink-700',
                'solid-purple': 'hover:bg-purple-100 hover:text-purple-700',
                'solid-gray': 'hover:bg-gray-100 hover:text-gray-700',
                'solid-black': 'hover:bg-gray-500',
                'solid-white': 'hover:bg-gray-100 border border-gray-300'
            },
            lightHoverColors: {
                'light-red': 'hover:bg-red-50 hover:text-red-700',
                'light-blue': 'hover:bg-blue-50 hover:text-blue-700',
                'light-green': 'hover:bg-green-50 hover:text-green-700',
                'light-yellow': 'hover:bg-yellow-50 hover:text-yellow-700',
                'light-indigo': 'hover:bg-indigo-50 hover:text-indigo-700',
                'light-pink': 'hover:bg-pink-50 hover:text-pink-700',
                'light-purple': 'hover:bg-purple-50 hover:text-purple-700',
                'light-gray': 'hover:bg-gray-50 hover:text-gray-700',
                'light-black': 'hover:bg-gray-500',
                'light-white': 'hover:bg-gray-100 border border-gray-300'
            },
        }
    },
    computed: {
        bgColorStyle(){
            if(this.color.includes('solid')){
                /*Solid Colors*/
                return this.solidColors[this.color]
            }else if(this.color.includes('light')){
                /*Light Colors*/
                return this.lightColors[this.color]
            }else if(this.color.includes('gradient')){
                /*Gradient Colors*/
                return this.gradientDirections[this.gradientDirection]+' '+
                    this.gradientFirstColors[this.color.split('-')[1]]+' '+
                    this.gradientSecondColors[this.color.split('-')[3]]
            }
        },
        bgHoverColorStyle(){
            if(this.color.includes('solid')){
                /*Solid Colors*/
                return this.solidHoverColors[this.color]
            }else if(this.color.includes('light')){
                /*Light Colors*/
                return this.lightHoverColors[this.color]
            }else if(this.color.includes('gradient')){
                /*Gradient Colors*/
                return 'filter hover:brightness-125'
            }
        },
        textColorStyle(){
            if(this.color.includes('solid')){
                /*Solid Colors*/
                return this.solidTextColors[this.color]
            }else if(this.color.includes('light')){
                /*Light Colors*/
                return this.lightTextColors[this.color]
            }else if(this.color.includes('gradient')){
                return this.solidTextColors['solid-'+this.color.split('-')[1]]
            }
        }
    }
}


================================================
FILE: resources/js/Mixins/Styles/contentCardStyleMixin.js
================================================
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";
export const contentCardStyleMixin = {
    props: {
        width: {
            type: Number,
            default: 1
        },
        adaptiveHeight: {
            type: Boolean,
            default: false
        }
    },
    mixins: [radiusSizeMixin,bgColorStyles],
    data(){
        return {
            widthStyle: {
                '1': 'md:col-span-1',
                '2': 'md:col-span-2',
                '3': 'md:col-span-3',
                '4': 'md:col-span-4',
                '5': 'md:col-span-5',
                '6': 'md:col-span-6',
                '7': 'md:col-span-7',
                '8': 'md:col-span-8',
                '9': 'md:col-span-9',
                '10': 'md:col-span-10',
                '11': 'md:col-span-11',
                '12': 'md:col-span-12'
            },
            defaultStyle: {
                '0': 'col-span-full'
            }
        }
    },
    computed: {
        calculatedCardStyle() {
            let style = '';
            /*Style Migrating*/
            if(this.adaptiveHeight){
                style = 'place-self-start '
            }
            style += this.bgColorStyle + ' ' + this.radiusStyle +' ' + this.textColorStyle + ' ' + this.widthStyle[this.width] + ' ' + this.defaultStyle[0]
            return style
        }
    }
}


================================================
FILE: resources/js/Mixins/Styles/forgotPasswordStyleMixin.js
================================================
import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";

export const forgotPasswordStyleMixin = {
    mixins: [bgColorStyles,radiusSizeMixin],
    computed: {
        calculatedForgotPasswordStyle() {
            let style;
            style = this.bgColorStyle + ' '
            style += this.textColorStyle

            return style
        }
    }
}

================================================
FILE: resources/js/Mixins/Styles/fullScreenCardStyleMixin.js
================================================
import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";

export const fullScreenCardStyleMixin = {
    mixins: [bgColorStyles],
    computed: {
        calculatedFullscreenCardStyle() {
            let style = this.bgColorStyle + ' border-none';

            return style
        }
    }
}

================================================
FILE: resources/js/Mixins/Styles/gridStyleMixin.js
================================================
export const gridStyleMixin = {
    props: {
        gap: {
            type: Number,
            default: 4
        },
        col: {
            type: Number,
        },
        colPhone: Number,
        colTablet: Number,
        colLaptop: Number,
        colDesktop: Number,
    },
    data() {
        return {
            gapStyle: {
                '0': 'gap-0',
                '1': 'gap-1 mb-1',
                '2': 'gap-2 mb-2',
                '3': 'gap-3 mb-3',
                '4': 'gap-4 mb-4',
                '5': 'gap-5 mb-5',
                '6': 'gap-6 mb-6',
                '7': 'gap-7 mb-7',
                '8': 'gap-8 mb-8',
                '9': 'gap-9 mb-9',
                '10': 'gap-10 mb-10'
            },
            gridStyle: {
                '0': 'grid-cols-none',
                '1': 'grid-cols-1',
                '2': 'grid-cols-2',
                '3': 'grid-cols-3',
                '4': 'grid-cols-4',
                '5': 'grid-cols-5',
                '6': 'grid-cols-6',
                '7': 'grid-cols-7',
                '8': 'grid-cols-8',
                '9': 'grid-cols-9',
                '10': 'grid-cols-10',
                '11': 'grid-cols-11',
                '12': 'grid-cols-12',
            },
            gridPhoneStyle: {
                '0': 'sm:grid-cols-none',
                '1': 'sm:grid-cols-1',
                '2': 'sm:grid-cols-2',
                '3': 'sm:grid-cols-3',
                '4': 'sm:grid-cols-4',
                '5': 'sm:grid-cols-5',
                '6': 'sm:grid-cols-6',
                '7': 'sm:grid-cols-7',
                '8': 'sm:grid-cols-8',
                '9': 'sm:grid-cols-9',
                '10': 'sm:grid-cols-10',
                '11': 'sm:grid-cols-11',
                '12': 'sm:grid-cols-12',
            },
            gridTabletStyle: {
                '0': 'md:grid-cols-none',
                '1': 'md:grid-cols-1',
                '2': 'md:grid-cols-2',
                '3': 'md:grid-cols-3',
                '4': 'md:grid-cols-4',
                '5': 'md:grid-cols-5',
                '6': 'md:grid-cols-6',
                '7': 'md:grid-cols-7',
                '8': 'md:grid-cols-8',
                '9': 'md:grid-cols-9',
                '10': 'md:grid-cols-10',
                '11': 'md:grid-cols-11',
                '12': 'md:grid-cols-12',
            },
            gridLaptopStyle: {
                '0': 'lg:grid-cols-none',
                '1': 'lg:grid-cols-1',
                '2': 'lg:grid-cols-2',
                '3': 'lg:grid-cols-3',
                '4': 'lg:grid-cols-4',
                '5': 'lg:grid-cols-5',
                '6': 'lg:grid-cols-6',
                '7': 'lg:grid-cols-7',
                '8': 'lg:grid-cols-8',
                '9': 'lg:grid-cols-9',
                '10': 'lg:grid-cols-10',
                '11': 'lg:grid-cols-11',
                '12': 'lg:grid-cols-12',
            },
            gridDesktopStyle: {
                '0': 'xl:grid-cols-none',
                '1': 'xl:grid-cols-1',
                '2': 'xl:grid-cols-2',
                '3': 'xl:grid-cols-3',
                '4': 'xl:grid-cols-4',
                '5': 'xl:grid-cols-5',
                '6': 'xl:grid-cols-6',
                '7': 'xl:grid-cols-7',
                '8': 'xl:grid-cols-8',
                '9': 'xl:grid-cols-9',
                '10': 'xl:grid-cols-10',
                '11': 'xl:grid-cols-11',
                '12': 'xl:grid-cols-12',
            },
            defaultStyle: {
                '0': 'justify-items-stretch'
            }
        }
    },
    computed: {
        calculatedGridStyle() {
            let style;
            if (this.col) {
                style = this.gridStyle[this.col]
            } else {
                style = this.gridStyle[1] + ' '
            }
            if (this.colPhone) {
                style = this.gridPhoneStyle[this.colPhone] + ' '
            }
            if (this.colTablet) {
                style = style + this.gridTabletStyle[this.colTablet] + ' '
            }
            if (this.colLaptop) {
                style = style + this.gridLaptopStyle[this.colLaptop] + ' '
            }
            if (this.colDesktop) {
                style = style + this.gridDesktopStyle[this.colDesktop]
            }

            return style + ' ' + this.defaultStyle[0]
        }
    }
}


================================================
FILE: resources/js/Mixins/Styles/inputGroupStyleMixin.js
================================================
export const inputGroupStyleMixin = {
    data(){
        return{
            subLabelColors:{
                'solid-red': 'text-red-500',
                'solid-blue': 'text-blue-500',
                'solid-green': 'text-green-500',
                'solid-yellow': 'text-yellow-500',
                'solid-indigo': 'text-indigo-500',
                'solid-pink': 'text-pink-500',
                'solid-purple': 'text-purple-500',
                'solid-gray': 'text-gray-500',
                'solid-black': 'text-black',
                'solid-white': 'text-white'
            }
        }
    }
}

================================================
FILE: resources/js/Mixins/Styles/listStyleMixin.js
================================================
export const listStyleMixin = {
    data() {
        return {
            listColors: {
                'solid-red': "bg-red-400 text-white border-red-100 hover:bg-red-100 hover:text-red-700 focus:bg-red-100 focus:text-red-700",
                'solid-blue': "bg-blue-400 text-white border-blue-100 hover:bg-blue-100 hover:text-blue-700 focus:bg-blue-100 focus:text-blue-700",
                'solid-green': "bg-green-400 text-white border-green-100 hover:bg-green-100 hover:text-green-700 focus:bg-green-100 focus:text-green-700",
                'solid-yellow': "bg-yellow-400 text-white border-yellow-100 hover:bg-yellow-100 hover:text-yellow-700 focus:bg-yellow-100 focus:text-yellow-700",
                'solid-indigo': "bg-indigo-400 text-white border-indigo-100 hover:bg-indigo-100 hover:text-indigo-700 focus:bg-indigo-100 focus:text-indigo-700",
                'solid-purple': "bg-purple-400 text-white border-purple-100 hover:bg-purple-100 hover:text-purple-700 focus:bg-purple-100 focus:text-purple-700",
                'solid-pink': "bg-pink-400 text-white border-pink-100 hover:bg-pink-100 hover:text-pink-700 focus:bg-pink-100 focus:text-pink-700",
                'solid-gray': "bg-gray-400 text-gray-100 border-gray-100 hover:bg-gray-100 hover:text-gray-700 focus:bg-gray-100 focus:text-gray-700",
                'solid-white': "bg-white border-gray-300 text-gray-700 hover:bg-gray-100 hover:text-white-700 focus:bg-gray-100 focus:text-white-700",
                'solid-black': "bg-black text-white hover:bg-gray-500 hover:text-gray-100 focus:bg-black-100 focus:text-black-700",
                'light-red': "bg-red-50 border-red-500 text-red-600 hover:bg-red-300 hover:text-red-700 focus:bg-red-300 focus:text-red-700",
                'light-blue': "bg-blue-50 border-blue-500 text-blue-600 hover:bg-blue-300 hover:text-blue-700 focus:bg-blue-300 focus:text-blue-700",
                'light-green': "bg-green-50 border-green-500 text-green-600 hover:bg-green-300 hover:text-green-700 focus:bg-green-300 focus:text-green-700",
                'light-yellow': "bg-yellow-50 border-yellow-500 text-yellow-600 hover:bg-yellow-300 hover:text-yellow-700 focus:bg-yellow-300 focus:text-yellow-700",
                'light-indigo': "bg-indigo-50 border-indigo-500 text-indigo-600 hover:bg-indigo-300 hover:text-indigo-700 focus:bg-indigo-300 focus:text-indigo-700",
                'light-purple': "bg-purple-50 border-purple-500 text-purple-600 hover:bg-purple-300 hover:text-purple-700 focus:bg-purple-300 focus:text-purple-700",
                'light-pink': "bg-pink-50 border-pink-500 text-pink-600 hover:bg-pink-300 hover:text-pink-700 focus:bg-pink-300 focus:text-pink-700",
                'light-gray': "bg-gray-50 border-gray-500 text-gray-600 hover:bg-gray-300 hover:text-gray-700 focus:bg-gray-300 focus:text-gray-700",
            },
            listActiveColors: {
                'solid-red': "bg-red-100 text-red-700 hover:bg-red-200",
                'solid-blue': "bg-blue-100 text-blue-700 hover:bg-blue-200",
                'solid-green': "bg-green-100 text-green-700 hover:bg-green-200",
                'solid-yellow': "bg-yellow-100 text-yellow-700 hover:bg-yellow-200",
                'solid-indigo': "bg-indigo-100 text-indigo-700 hover:bg-indigo-200",
                'solid-purple': "bg-purple-100 text-purple-700 hover:bg-purple-200",
                'solid-pink': "bg-pink-100 text-pink-700 hover:bg-pink-200",
                'solid-gray': "bg-gray-100 text-gray-700 hover:bg-gray-200",
                'solid-white': "border-gray-300 bg-gray-200 text-gray-700 hover:bg-gray-300",
                'solid-black': "bg-gray-400 text-gray-700 hover:bg-gray-300",
                'light-red': "border-red-500 bg-red-300 text-red-700",
                'light-blue': "border-blue-500 bg-blue-300 text-blue-700",
                'light-green': "border-green-500 bg-green-300 text-green-700",
                'light-yellow': "border-yellow-500 bg-yellow-300 text-yellow-700",
                'light-indigo': "border-indigo-500 bg-indigo-300 text-indigo-700",
                'light-purple': "border-purple-500 bg-purple-300 text-purple-700",
                'light-pink': "border-pink-500 bg-pink-300 text-pink-700",
                'light-gray': "border-gray-500 bg-gray-300 text-gray-700"
            },
            radiusStyles:{
                '0': null,
                '1': 'first:rounded-t-sm last:rounded-b-sm',
                '2': 'first:rounded-t last:rounded-b',
                '3': 'first:rounded-t-md last:rounded-b-md',
                '4': 'first:rounded-t-lg last:rounded-b-lg',
                '5': 'first:rounded-t-xl last:rounded-b-xl',
                '6': 'first:rounded-t-2xl last:rounded-b-2xl',
                '7': 'first:rounded-t-3xl last:rounded-b-3xl',
                '8': 'first:rounded-t-full last:rounded-b-full'
            }
        }
    },
    computed: {
        calculatedListStyle() {
            let style = this.radiusStyles[this.$parent.radius]+ ' ';

            if(this.active){
                style += this.listActiveColors[this.$parent.color]
            }else{
                style += this.listColors[this.$parent.color]
            }

            return style
        }
    }
}

================================================
FILE: resources/js/Mixins/Styles/lockStyleMixin.js
================================================
import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";

export const lockStyleMixin = {
    mixins: [bgColorStyles,radiusSizeMixin],
    computed: {
        calculatedLockStyle() {
            let style;
            style = this.bgColorStyle + ' '
            style += this.textColorStyle

            return style
        }
    }
}

================================================
FILE: resources/js/Mixins/Styles/loginStyleMixin.js
================================================
import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";

export const loginStyleMixin = {
    mixins: [bgColorStyles,radiusSizeMixin],
    computed: {
        calculatedLoginStyle() {
            let style;
            style = this.bgColorStyle + ' '
            style += this.textColorStyle

            return style
        }
    }
}

================================================
FILE: resources/js/Mixins/Styles/modalStyleMixin.js
================================================
import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
export const modalStyleMixin = {
    mixins: [bgColorStyles,radiusSizeMixin],
    computed: {
        calculatedModalStyle() {
            let style;
            style = this.radiusStyle + ' ' + this.bgColorStyle;

            return style
        }
    }
}

================================================
FILE: resources/js/Mixins/Styles/paginateStyleMixin.js
================================================
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";

export const paginateStyleMixin = {
    props: {
        color: {
            type: String,
            default: 'solid-blue'
        }
    },
    mixins: [radiusSizeMixin],
    data() {
        return {
            paginateColors: {
                'solid-red': 'bg-red-300 text-gray-100',
                'solid-blue': 'bg-blue-300 text-gray-100',
                'solid-green': 'bg-green-300 text-gray-100',
                'solid-yellow': 'bg-yellow-300 text-gray-100',
                'solid-indigo': 'bg-indigo-300 text-gray-100',
                'solid-pink': 'bg-pink-300 text-gray-100',
                'solid-purple': 'bg-purple-300 text-gray-100',
                'solid-gray': 'bg-gray-300 text-gray-100',
                'solid-black': 'bg-black text-gray-100',
                'solid-white': 'bg-white border border-gray-300 text-gray-700',
                'light-red': 'bg-red-50 border border-red-500 text-red-600',
                'light-blue': 'bg-blue-50 border border-blue-500 text-blue-600',
                'light-green': 'bg-green-50 border border-green-500 text-green-600',
                'light-yellow': 'bg-yellow-50 border border-yellow-500 text-yellow-600',
                'light-indigo': 'bg-indigo-50 border border-indigo-500 text-indigo-600',
                'light-pink': 'bg-pink-50 border border-pink-500 text-pink-600',
                'light-purple': 'bg-purple-50 border border-purple-500 text-purple-600',
                'light-gray': 'bg-gray-50 border border-gray-500 text-gray-600',
            },
            paginateActiveColors: {
                'solid-red': 'bg-red-500 text-gray-100',
                'solid-blue': 'bg-blue-500 text-gray-100',
                'solid-green': 'bg-green-500 text-gray-100',
                'solid-yellow': 'bg-yellow-500 text-gray-100',
                'solid-indigo': 'bg-indigo-500 text-gray-100',
                'solid-pink': 'bg-pink-500 text-gray-100',
                'solid-purple': 'bg-purple-500 text-gray-100',
                'solid-gray': 'bg-gray-500 text-gray-100',
                'solid-black': 'bg-gray-300 text-gray-100 border border-gray-700',
                'solid-white': 'bg-gray-500 text-gray-100 border border-gray-500',
                'light-red': 'bg-red-500 border border-red-500 text-gray-100',
                'light-blue': 'bg-blue-500 border border-blue-500 text-gray-100',
                'light-green': 'bg-green-500 border border-green-500 text-gray-100',
                'light-yellow': 'bg-yellow-500 border border-yellow-500 text-gray-100',
                'light-indigo': 'bg-indigo-500 border border-indigo-500 text-gray-100',
                'light-pink': 'bg-pink-500 border border-pink-500 text-gray-100',
                'light-purple': 'bg-purple-500 border border-purple-500 text-gray-100',
                'light-gray': 'bg-gray-500 border border-gray-500 text-gray-100',
            },
            arrowColors: {
                'solid-red': 'bg-red-500 text-red-300 hover:text-red-500',
                'solid-blue': 'bg-blue-500 text-blue-300 hover:text-blue-500',
                'solid-green': 'bg-green-500 text-green-300 hover:text-green-500',
                'solid-yellow': 'bg-yellow-500 text-yellow-300 hover:text-yellow-500',
                'solid-indigo': 'bg-indigo-500 text-indigo-300 hover:text-indigo-500',
                'solid-pink': 'bg-pink-500 text-pink-300 hover:text-pink-500',
                'solid-purple': 'bg-purple-500 text-purple-300 hover:text-purple-500',
                'solid-gray': 'bg-gray-500 text-gray-300 hover:text-gray-500',
                'solid-black': 'bg-gray-500 text-gray-300 hover:text-gray-500',
                'solid-white': 'bg-gray-500 text-gray-300 hover:text-gray-500',
                'light-red': 'bg-red-500 text-red-300 hover:text-red-500',
                'light-blue': 'bg-blue-500 text-blue-300 hover:text-blue-500',
                'light-green': 'bg-green-500 text-green-300 hover:text-green-500',
                'light-yellow': 'bg-yellow-500 text-yellow-300 hover:text-yellow-500',
                'light-indigo': 'bg-indigo-500 text-indigo-300 hover:text-indigo-500',
                'light-pink': 'bg-pink-500 text-pink-300 hover:text-pink-500',
                'light-purple': 'bg-purple-500 text-purple-300 hover:text-purple-500',
                'light-gray': 'bg-gray-500 text-gray-300 hover:text-gray-500',
            }
        }
    },
    computed: {
        calculatedPaginateStyle(){
            let style;
            style = this.radiusStyle + ' ' + this.paginateColors[this.color];

            return style
        },
        calculatedActivePaginateStyle(){
            let style;
            style = this.radiusStyle + ' ' + this.paginateActiveColors[this.color];

            return style
        },
        calculatedArrowStyle() {
            let style;
            style = this.radiusStyle + ' ' + this.arrowColors[this.color];

            return style
        }
    }


}

================================================
FILE: resources/js/Mixins/Styles/registerStyleMixin.js
================================================
import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";

export const registerStyleMixin = {
    mixins: [bgColorStyles,radiusSizeMixin],
    computed: {
        calculatedRegisterStyle() {
            let style;
            style = this.bgColorStyle + ' '
            style += this.textColorStyle

            return style
        }
    }
}

================================================
FILE: resources/js/Mixins/Styles/statisticWidgetStyleMixin.js
================================================
export const statisticWidgetStyleMixin = {
    props: {
        color: {
            required: false
        },
        gradientDirection: {
            type: String,
            default: 'r'
        },
        diffDirection: {
            required: false
        }
    },
    data() {
        return {
            iconColors: {
                'solid-red': 'bg-red-500 text-red-500 border-red-500',
                'solid-blue': 'bg-blue-500 text-blue-500 border-blue-500',
                'solid-green': 'bg-green-500 text-green-500 border-green-500',
                'solid-yellow': 'bg-yellow-500 text-yellow-500 border-yellow-500',
                'solid-indigo': 'bg-indigo-500 text-indigo-500 border-indigo-500',
                'solid-pink': 'bg-pink-500 text-pink-500 border-pink-500',
                'solid-purple': 'bg-purple-500 text-purple-500 border-purple-500',
                'solid-gray': 'bg-gray-500 text-gray-500 border-gray-500',
                'solid-black': 'bg-black-500 text-black-500 border-black-500',
                'solid-white': 'bg-white-500 text-white-500 border-white-500',
                'light-red': 'bg-red-500 text-red-500 border-red-500',
                'light-blue': 'bg-blue-500 text-blue-500 border-blue-500',
                'light-green': 'bg-green-500 text-green-500 border-green-500',
                'light-yellow': 'bg-yellow-500 text-yellow-500 border-yellow-500',
                'light-indigo': 'bg-indigo-500 text-indigo-500 border-indigo-500',
                'light-pink': 'bg-pink-500 text-pink-500 border-pink-500',
                'light-purple': 'bg-purple-500 text-purple-500 border-purple-500',
                'light-gray': 'bg-gray-500 text-gray-500 border-gray-500'
            },
            diffStyles: {
                'up': 'text-white bg-green-500 px-3 py-1 rounded-md bg-opacity-70',
                'up-green': 'text-green-700 border bg-green-100 px-3 py-1 rounded-md bg-opacity-70',
                'down': 'text-white bg-red-500 px-3 py-1 rounded-md bg-opacity-70',
                'down-red': 'text-red-700 border bg-red-100 px-3 py-1 rounded-md bg-opacity-70',
                'default': 'text-gray-600 bg-white px-3 py-1 rounded-md bg-opacity-70 font-semibold'
            }
        }
    },
    computed: {
        calculatedIconStyle() {
            let style;
            if (this.color.includes('gradient')) {
                style = 'border-white '+ this.textColorStyle
            } else {
                style = this.iconColors[this.color]
            }

            return style;
        },
        calculatedDiffStyle() {
            let style;
            if (this.diffDirection === ('up') || this.diffDirection === ('positive-down')) {
                if (this.color === 'solid-green') {
                    style = this.diffStyles['up-green']
                } else {
                    style = this.diffStyles['up']
                }
            } else if (this.diffDirection === ('down') || this.diffDirection === ('negative-up')) {
                if (this.color === 'solid-red') {
                    style = this.diffStyles['down-red']
                } else {
                    style = this.diffStyles['down']
                }
            }

            return style;
        }
    }
}

================================================
FILE: resources/js/Mixins/Styles/tabStyleMixin.js
================================================
import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";

export const tabStyleMixin = {
    props: {
        radius: {
            required: false,
            default: 0
        },
        color: {
            required: false,
            default: 'solid-white'
        },
        tabStyle: {
            required: false,
            default: 1
        },
    },
    mixins: [bgColorStyles],
    data() {
        return {
            tab1Colors: {
                'solid-red': 'bg-red-200 border-red-300 text-red-600 mt-1 -mb-1',
                'solid-blue': 'bg-blue-200 border-blue-300 text-blue-600 mt-1 -mb-1',
                'solid-green': 'bg-green-200 border-green-300 text-green-600 mt-1 -mb-1',
                'solid-yellow': 'bg-yellow-200 border-yellow-300 text-yellow-600 mt-1 -mb-1',
                'solid-indigo': 'bg-indigo-200 border-indigo-300 text-indigo-600 mt-1 -mb-1',
                'solid-pink': 'bg-pink-200 border-pink-300 text-pink-600 mt-1 -mb-1',
                'solid-purple': 'bg-purple-200 border-purple-300 text-purple-600 mt-1 -mb-1',
                'solid-gray': 'bg-gray-200 border-gray-300 text-gray-600 mt-1 -mb-1',
                'solid-black': 'bg-gray-400 mt-1 -mb-1',
                'solid-white': 'bg-white text-gray-600 mt-1 -mb-1',
                'light-red': 'bg-red-100 border-red-300 text-red-600 mt-1 -mb-1',
                'light-blue': 'bg-blue-100 border-blue-300 text-blue-600 mt-1 -mb-1',
                'light-green': 'bg-green-100 border-green-300 text-green-600 mt-1 -mb-1',
                'light-yellow': 'bg-yellow-100 border-yellow-300 text-yellow-600 mt-1 -mb-1',
                'light-indigo': 'bg-indigo-100 border-indigo-300 text-indigo-600 mt-1 -mb-1',
                'light-pink': 'bg-pink-100 border-pink-300 text-pink-600 mt-1 -mb-1',
                'light-purple': 'bg-purple-100 border-purple-300 text-purple-600 mt-1 -mb-1',
                'light-gray': 'bg-gray-50 border-gray-300 text-gray-600 mt-1 -mb-1',
            },
            tab2Colors: {
                'solid-red': 'bg-red-500 text-gray-100',
                'solid-blue': 'bg-blue-500 text-gray-100',
                'solid-green': 'bg-green-500 text-gray-100',
                'solid-yellow': 'bg-yellow-500 text-gray-100',
                'solid-indigo': 'bg-indigo-500 text-gray-100',
                'solid-pink': 'bg-pink-500 text-gray-100',
                'solid-purple': 'bg-purple-500 text-gray-100',
                'solid-gray': 'bg-gray-500 text-gray-100',
                'solid-black': 'bg-black ',
                'solid-white': 'bg-gray-200 text-gray-800',
                'light-red': 'bg-red-200 border border-red-500',
                'light-blue': 'bg-blue-200 border border-blue-500',
                'light-green': 'bg-green-200 border border-green-500',
                'light-yellow': 'bg-yellow-200 border border-yellow-500',
                'light-indigo': 'bg-indigo-200 border border-indigo-500',
                'light-pink': 'bg-pink-200 border border-pink-500',
                'light-purple': 'bg-purple-200 border border-purple-500',
                'light-gray': 'bg-gray-200 border border-gray-500',
            },
            tab1ActiveColors: {
                'solid-red': 'bg-red-500 text-gray-100',
                'solid-blue': 'bg-blue-500 text-gray-100',
                'solid-green': 'bg-green-500 text-gray-100',
                'solid-yellow': 'bg-yellow-500 text-gray-100',
                'solid-indigo': 'bg-indigo-500 text-gray-100',
                'solid-pink': 'bg-pink-500 text-gray-100',
                'solid-purple': 'bg-purple-500 text-gray-100',
                'solid-gray': 'bg-gray-500 text-gray-100',
                'solid-black': 'bg-black text-gray-100',
                'solid-white': 'bg-gray-300 text-gray-600',
                'light-red': 'bg-red-200 border border-b-0 border-red-500 text-red-600',
                'light-blue': 'bg-blue-200 border border-b-0 border-blue-500 text-blue-600',
                'light-green': 'bg-green-200 border border-b-0 border-green-500 text-green-600',
                'light-yellow': 'bg-yellow-200 border border-b-0 border-yellow-500 text-yellow-600',
                'light-indigo': 'bg-indigo-200 border border-b-0 border-indigo-500 text-indigo-600',
                'light-pink': 'bg-pink-200 border border-b-0 border-pink-500 text-pink-600',
                'light-purple': 'bg-purple-200 border border-b-0 border-purple-500 text-purple-600',
                'light-gray': 'bg-gray-200 border border-b-0 border-gray-500 text-gray-600',
            },
            tabContentColors: {
                'solid-red': 'bg-gray-100 border-red-500 text-gray-600',
                'solid-blue': 'bg-gray-100 border-blue-500 text-gray-600',
                'solid-green': 'bg-gray-100 border-green-500 text-gray-600',
                'solid-yellow': 'bg-gray-100 border-yellow-500 text-gray-600',
                'solid-indigo': 'bg-gray-100 border-indigo-500 text-gray-600',
                'solid-pink': 'bg-gray-100 border-pink-500 text-gray-600',
                'solid-purple': 'bg-gray-100 border-purple-500 text-gray-600',
                'solid-gray': 'bg-gray-100 border-gray-500 text-gray-600',
                'solid-black': 'bg-gray-100 border-black',
                'solid-white': 'bg-white border-gray-300 text-gray-600',
                'light-red': 'bg-gray-100 border border-red-500',
                'light-blue': 'bg-gray-100 border border-blue-500',
                'light-green': 'bg-gray-100 border border-green-500',
                'light-yellow': 'bg-gray-100 border border-yellow-500',
                'light-indigo': 'bg-gray-100 border border-indigo-500',
                'light-pink': 'bg-gray-100 border border-pink-500',
                'light-purple': 'bg-gray-100 border border-purple-500',
                'light-gray': 'bg-gray-100 border border-gray-500',
            },
            tab2ActiveColors: {
                'solid-red': 'bg-red-100 text-red-600',
                'solid-blue': 'bg-blue-100 text-blue-600',
                'solid-green': 'bg-green-100 text-green-600',
                'solid-yellow': 'bg-yellow-100 text-yellow-600',
                'solid-indigo': 'bg-indigo-100 text-indigo-600',
                'solid-pink': 'bg-pink-100 text-pink-600',
                'solid-purple': 'bg-purple-100 text-purple-600',
                'solid-gray': 'bg-gray-100 text-gray-600',
                'solid-black': 'bg-gray-500 text-gray-100',
                'solid-white': 'bg-gray-500 text-gray-100',
                'light-red': 'bg-red-500 text-gray-100 border border-red-500',
                'light-blue': 'bg-blue-500 text-gray-100 border border-blue-500',
                'light-green': 'bg-green-500 text-gray-100 border border-green-500',
                'light-yellow': 'bg-yellow-500 text-gray-100 border border-yellow-500',
                'light-indigo': 'bg-indigo-500 text-gray-100 border border-indigo-500',
                'light-pink': 'bg-pink-500 text-gray-100 border border-pink-500',
                'light-purple': 'bg-purple-500 text-gray-100 border border-purple-500',
                'light-gray': 'bg-gray-500 text-gray-100 border border-gray-500',
            },
            radiusStyles: {
                '0': {
                    content: null,
                    title2container: null,
                    title2: null,
                    title1left: null,
                    title1right: null
                },
                '1': {
                    content: 'rounded-r-sm rounded-bl-sm',
                    title2container: 'rounded-b-0 rounded-t-sm',
                    title2: 'rounded-sm',
                    title1left: 'rounded-tl-sm',
                    title1right: 'rounded-tr-sm'
                },
                '2': {
                    content: 'rounded-r rounded-bl',
                    title2container: 'rounded-b-0 rounded-t',
                    title2: 'rounded',
                    title1left: 'rounded-tl',
                    title1right: 'rounded-tr'
                },
                '3': {
                    content: 'rounded-r-md rounded-bl-md',
                    title2container: 'rounded-b-0 rounded-t-md',
                    title2: 'rounded-md',
                    title1left: 'rounded-tl-md',
                    title1right: 'rounded-tr-md'
                },
                '4': {
                    content: 'rounded-r-lg rounded-bl-lg',
                    title2container: 'rounded-b-0 rounded-t-lg',
                    title2: 'rounded-lg',
                    title1left: 'rounded-tl-lg',
                    title1right: 'rounded-tr-lg'
                },
                '5': {
                    content: 'rounded-r-xl rounded-bl-xl',
                    title2container: 'rounded-b-0 rounded-t-xl',
                    title2: 'rounded-xl',
                    title1left: 'rounded-tl-xl',
                    title1right: 'rounded-tr-xl'
                },
                '6': {
                    content: 'rounded-r-2xl rounded-bl-2xl',
                    title2container: 'rounded-b-0 rounded-t-2xl',
                    title2: 'rounded-2xl',
                    title1left: 'rounded-tl-2xl',
                    title1right: 'rounded-tr-2xl'
                },
                '7': {
                    content: 'rounded-r-3xl rounded-bl-3xl',
                    title2container: 'rounded-b-0 rounded-t-3xl',
                    title2: 'rounded-3xl',
                    title1left: 'rounded-tl-3xl',
                    title1right: 'rounded-tr-3xl'
                },
                '8': {
                    content: 'rounded-r-full rounded-bl-full',
                    title2container: 'rounded-b-0 rounded-t-full',
                    title2: 'rounded-full',
                    title1left: 'rounded-tl-full',
                    title1right: 'rounded-tr-full'
                }
            }
        }
    },
    computed: {
        calculatedTitleStyle() {
            let style;

            if(this.tabStyle === 1){
                style = this.tab1Colors[this.color]+ ' first:border-l last:border-r border-t';
            }else{
                style = this.tab2Colors[this.color] ;
            }

            return style
        },
        calculatedActiveTitleStyle() {
            let style;

            if(this.tabStyle === 1){
                style = this.tab1ActiveColors[this.color];
            }else{
                style = this.tab2ActiveColors[this.color];
            }

            return style
        },
        calculatedTitle2ContainerStyle() {
            let style = 'p-2 gap-2 border-b-0 ';
            style += this.radiusStyles[this.radius].title2container + ' '
            style += this.bgColorStyle + ' '
            style += this.textColorStyle

            return style
        },
        calculatedContentStyle() {
            let style = this.radiusStyles[this.radius].content + ' ';
            style += this.tabContentColors[this.color]

            return style
        },
    }
}

================================================
FILE: resources/js/Mixins/Styles/toastrStyleMixin.js
================================================
import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";
import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";

export const toastrStyleMixin = {
    props: {
        position: {
            type: String,
            default: 'rb'
        },
        border: {
            type: Boolean,
            default: false
        }
    },
    mixins: [bgColorStyles, radiusSizeMixin],
    data() {
        return {
            positionStyles: {
                'lb': "fixed left-4 bottom-4",
                'rb': "fixed right-6 bottom-4",
                'lt': "fixed left-4 top-4",
                'rt': "fixed right-6 top-4",
                '': 'relative w-full'
            },
            closeIconColors: {
                'solid-red': 'text-red-500 border-red-500',
                'solid-blue': 'text-blue-500 border-blue-500',
                'solid-green': 'text-green-500 border-green-500',
                'solid-yellow': 'text-yellow-500 border-yellow-500',
                'solid-indigo': 'text-indigo-500 border-indigo-500',
                'solid-pink': 'text-pink-500 border-pink-500',
                'solid-purple': 'text-purple-500 border-purple-500',
                'solid-gray': 'text-gray-500 border-gray-500',
                'solid-black': 'text-black-500 border-black-500',
                'solid-white': 'text-white-500 border-white-500',
                'light-red': 'text-red-500 border-red-500',
                'light-blue': 'text-blue-500 border-blue-500',
                'light-green': 'text-green-500 border-green-500',
                'light-yellow': 'text-yellow-500 border-yellow-500',
                'light-indigo': 'text-indigo-500 border-indigo-500',
                'light-pink': 'text-pink-500 border-pink-500',
                'light-purple': 'text-purple-500 border-purple-500',
                'light-gray': 'text-gray-500 border-gray-500'
            }
        }
    },
    computed: {
        calculatedToastrStyle() {
            let style;
            /*Style Migrating*/
            style = this.bgColorStyle +
                ' ' + this.radiusStyle +
                ' ' + this.textColorStyle +
                ' ' + this.positionStyles[this.position]
            if(this.border){
                style += ' border'
            }
            return style
        }
    }
}

================================================
FILE: resources/js/Mixins/Styles/tooltipStyleMixin.js
================================================
export const tooltipStyleMixin = {
    props:{
        position: {
            type: String,
            default: 'bottom'
        }
    },
    data(){
        return{
            positionStyle: {
                'left': {
                    arrow: 'absolute w-2 h-2 border-r border-t transform -right-1 top-4 rotate-45 z-10',
                    box: 'right-full -top-4'
                },
                'top': {
                    arrow: 'absolute w-2 h-2 bg-white border-b border-r transform left-4 -bottom-1 rotate-45 z-10',
                    box: 'left-0 bottom-6'
                },
                'bottom': {
                    arrow: 'absolute w-2 h-2 border-l border-t transform left-4 -top-1 rotate-45 z-10',
                    box: 'top-6'
                },
                'right': {
                    arrow: 'absolute w-2 h-2 border-l border-b transform -left-1 top-4 rotate-45 z-10',
                    box: 'left-full -top-4'
                }
            }
        }
    }
}

================================================
FILE: resources/js/Mixins/radiusSizeMixin.js
================================================
export const radiusSizeMixin = {
    props: {
        radius: {
            type: Number,
            require: false,
            default: 3
        }
    },
    data() {
        return {
            radiusSizes: [
                'rounded-sm',
                'rounded',
                'rounded-md',
                'rounded-lg',
                'rounded-xl',
                'rounded-2xl',
                'rounded-3xl',
                'rounded-full'
            ]
        }
    },
    computed: {
        radiusStyle() {
            let i, radiusStyle;
            for (i = 0; i < this.radiusSizes.length; i++) {
                if (i === this.radius - 1) {
                    radiusStyle = this.radiusSizes[i];
                }
            }
            return radiusStyle
        }
    }
}


================================================
FILE: resources/js/Mixins/settingsMenuMixin.js
================================================
export const settingsMenuMixin = {
    data(){
        return {
            menuList: [
                {
                    label: "Settings",
                    icon: "cog",
                    link: "settings",
                    linkType: "route",
                    type: "standard",
                    activeKey: ["settings-user"],
                },
                {
                    label: "Users",
                    icon: "",
                    link: "settings-user.index",
                    linkType: "route",
                    type: "standard",
                    activeKey: ["settings-user"],
                },
                {
                    label: "Roles",
                    icon: "",
                    link: "settings-role.index",
                    linkType: "route",
                    type: "standard",
                    activeKey: ["settings-role"],
                },
                {
                    label: "Permissions",
                    icon: "",
                    link: "settings-permission.index",
                    linkType: "route",
                    type: "standard",
                    activeKey: ["settings-permission"],
                },
                {
                    label: "System",
                    icon: "",
                    link: "settings-system",
                    linkType: "route",
                    type: "standard",
                    activeKey: ["settings-system"],
                }
            ]
        }
    }
}


================================================
FILE: resources/js/Pages/API/Index.vue
================================================
<script setup>
import ApiTokenManager from '@/Pages/API/Partials/ApiTokenManager.vue';
import AppLayout from '@/Layouts/AppLayout.vue';

defineProps({
    tokens: Array,
    availablePermissions: Array,
    defaultPermissions: Array,
});
</script>

<template>
    <AppLayout title="API Tokens">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                API Tokens
            </h2>
        </template>

        <div>
            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
                <ApiTokenManager
                    :tokens="tokens"
                    :available-permissions="availablePermissions"
                    :default-permissions="defaultPermissions"
                />
            </div>
        </div>
    </AppLayout>
</template>


================================================
FILE: resources/js/Pages/API/Partials/ApiTokenManager.vue
================================================
<script setup>
import { ref } from 'vue';
import { useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Jetstream/ActionMessage.vue';
import ActionSection from '@/Jetstream/ActionSection.vue';
import Checkbox from '@/Jetstream/Checkbox.vue';
import ConfirmationModal from '@/Jetstream/ConfirmationModal.vue';
import DangerButton from '@/Jetstream/DangerButton.vue';
import DialogModal from '@/Jetstream/DialogModal.vue';
import FormSection from '@/Jetstream/FormSection.vue';
import InputError from '@/Jetstream/InputError.vue';
import InputLabel from '@/Jetstream/InputLabel.vue';
import PrimaryButton from '@/Jetstream/PrimaryButton.vue';
import SecondaryButton from '@/Jetstream/SecondaryButton.vue';
import SectionBorder from '@/Jetstream/SectionBorder.vue';
import TextInput from '@/Jetstream/TextInput.vue';

const props = defineProps({
    tokens: Array,
    availablePermissions: Array,
    defaultPermissions: Array,
});

const createApiTokenForm = useForm({
    name: '',
    permissions: props.defaultPermissions,
});

const updateApiTokenForm = useForm({
    permissions: [],
});

const deleteApiTokenForm = useForm({});

const displayingToken = ref(false);
const managingPermissionsFor = ref(null);
const apiTokenBeingDeleted = ref(null);

const createApiToken = () => {
    createApiTokenForm.post(route('api-tokens.store'), {
        preserveScroll: true,
        onSuccess: () => {
            displayingToken.value = true;
            createApiTokenForm.reset();
        },
    });
};

const manageApiTokenPermissions = (token) => {
    updateApiTokenForm.permissions = token.abilities;
    managingPermissionsFor.value = token;
};

const updateApiToken = () => {
    updateApiTokenForm.put(route('api-tokens.update', managingPermissionsFor.value), {
        preserveScroll: true,
        preserveState: true,
        onSuccess: () => (managingPermissionsFor.value = null),
    });
};

const confirmApiTokenDeletion = (token) => {
    apiTokenBeingDeleted.value = token;
};

const deleteApiToken = () => {
    deleteApiTokenForm.delete(route('api-tokens.destroy', apiTokenBeingDeleted.value), {
        preserveScroll: true,
        preserveState: true,
        onSuccess: () => (apiTokenBeingDeleted.value = null),
    });
};
</script>

<template>
    <div>
        <!-- Generate API Token -->
        <FormSection @submitted="createApiToken">
            <template #title>
                Create API Token
            </template>

            <template #description>
                API tokens allow third-party services to authenticate with our application on your behalf.
            </template>

            <template #form>
                <!-- Token Name -->
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="name" value="Name" />
                    <TextInput
                        id="name"
                        v-model="createApiTokenForm.name"
                        type="text"
                        class="mt-1 block w-full"
                        autofocus
                    />
                    <InputError :message="createApiTokenForm.errors.name" class="mt-2" />
                </div>

                <!-- Token Permissions -->
                <div v-if="availablePermissions.length > 0" class="col-span-6">
                    <InputLabel for="permissions" value="Permissions" />

                    <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div v-for="permission in availablePermissions" :key="permission">
                            <label class="flex items-center">
                                <Checkbox v-model:checked="createApiTokenForm.permissions" :value="permission" />
                                <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ permission }}</span>
                            </label>
                        </div>
                    </div>
                </div>
            </template>

            <template #actions>
                <ActionMessage :on="createApiTokenForm.recentlySuccessful" class="me-3">
                    Created.
                </ActionMessage>

                <PrimaryButton :class="{ 'opacity-25': createApiTokenForm.processing }" :disabled="createApiTokenForm.processing">
                    Create
                </PrimaryButton>
            </template>
        </FormSection>

        <div v-if="tokens.length > 0">
            <SectionBorder />

            <!-- Manage API Tokens -->
            <div class="mt-10 sm:mt-0">
                <ActionSection>
                    <template #title>
                        Manage API Tokens
                    </template>

                    <template #description>
                        You may delete any of your existing tokens if they are no longer needed.
                    </template>

                    <!-- API Token List -->
                    <template #content>
                        <div class="space-y-6">
                            <div v-for="token in tokens" :key="token.id" class="flex items-center justify-between">
                                <div class="break-all dark:text-white">
                                    {{ token.name }}
                                </div>

                                <div class="flex items-center ms-2">
                                    <div v-if="token.last_used_ago" class="text-sm text-gray-400">
                                        Last used {{ token.last_used_ago }}
                                    </div>

                                    <button
                                        v-if="availablePermissions.length > 0"
                                        class="cursor-pointer ms-6 text-sm text-gray-400 underline"
                                        @click="manageApiTokenPermissions(token)"
                                    >
                                        Permissions
                                    </button>

                                    <button class="cursor-pointer ms-6 text-sm text-red-500" @click="confirmApiTokenDeletion(token)">
                                        Delete
                                    </button>
                                </div>
                            </div>
                        </div>
                    </template>
                </ActionSection>
            </div>
        </div>

        <!-- Token Value Modal -->
        <DialogModal :show="displayingToken" @close="displayingToken = false">
            <template #title>
                API Token
            </template>

            <template #content>
                <div>
                    Please copy your new API token. For your security, it won't be shown again.
                </div>

                <div v-if="$page.props.jetstream.flash.token" class="mt-4 bg-gray-100 dark:bg-gray-900 px-4 py-2 rounded font-mono text-sm text-gray-500 break-all">
                    {{ $page.props.jetstream.flash.token }}
                </div>
            </template>

            <template #footer>
                <SecondaryButton @click="displayingToken = false">
                    Close
                </SecondaryButton>
            </template>
        </DialogModal>

        <!-- API Token Permissions Modal -->
        <DialogModal :show="managingPermissionsFor != null" @close="managingPermissionsFor = null">
            <template #title>
                API Token Permissions
            </template>

            <template #content>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div v-for="permission in availablePermissions" :key="permission">
                        <label class="flex items-center">
                            <Checkbox v-model:checked="updateApiTokenForm.permissions" :value="permission" />
                            <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ permission }}</span>
                        </label>
                    </div>
                </div>
            </template>

            <template #footer>
                <SecondaryButton @click="managingPermissionsFor = null">
                    Cancel
                </SecondaryButton>

                <PrimaryButton
                    class="ms-3"
                    :class="{ 'opacity-25': updateApiTokenForm.processing }"
                    :disabled="updateApiTokenForm.processing"
                    @click="updateApiToken"
                >
                    Save
                </PrimaryButton>
            </template>
        </DialogModal>

        <!-- Delete Token Confirmation Modal -->
        <ConfirmationModal :show="apiTokenBeingDeleted != null" @close="apiTokenBeingDeleted = null">
            <template #title>
                Delete API Token
            </template>

            <template #content>
                Are you sure you would like to delete this API token?
            </template>

            <template #footer>
                <SecondaryButton @click="apiTokenBeingDeleted = null">
                    Cancel
                </SecondaryButton>

                <DangerButton
                    class="ms-3"
                    :class="{ 'opacity-25': deleteApiTokenForm.processing }"
                    :disabled="deleteApiTokenForm.processing"
                    @click="deleteApiToken"
                >
                    Delete
                </DangerButton>
            </template>
        </ConfirmationModal>
    </div>
</template>


================================================
FILE: resources/js/Pages/Auth/ConfirmPassword.vue
================================================
<script setup>
import { ref } from 'vue';
import { Head, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Jetstream/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Jetstream/AuthenticationCardLogo.vue';
import InputError from '@/Jetstream/InputError.vue';
import InputLabel from '@/Jetstream/InputLabel.vue';
import PrimaryButton from '@/Jetstream/PrimaryButton.vue';
import TextInput from '@/Jetstream/TextInput.vue';

const form = useForm({
    password: '',
});

const passwordInput = ref(null);

const submit = () => {
    form.post(route('password.confirm'), {
        onFinish: () => {
            form.reset();

            passwordInput.value.focus();
        },
    });
};
</script>

<template>
    <Head title="Secure Area" />

    <AuthenticationCard>
        <template #logo>
            <AuthenticationCardLogo />
        </template>

        <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
            This is a secure area of the application. Please confirm your password before continuing.
        </div>

        <form @submit.prevent="submit">
            <div>
                <InputLabel for="password" value="Password" />
                <TextInput
                    id="password"
                    ref="passwordInput"
                    v-model="form.password"
                    type="password"
                    class="mt-1 block w-full"
                    required
                    autocomplete="current-password"
                    autofocus
                />
                <InputError class="mt-2" :message="form.errors.password" />
            </div>

            <div class="flex justify-end mt-4">
                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                    Confirm
                </PrimaryButton>
            </div>
        </form>
    </AuthenticationCard>
</template>


================================================
FILE: resources/js/Pages/Auth/ForgotPassword.vue
================================================
<script setup>
/*Main functions*/
import { Head } from '@inertiajs/vue3';

/*Components*/
import TForgot from '@/Components/Auth/TForgot.vue';

/* Multi language */
import {useI18n} from "vue-i18n";
import {authTranslates} from "@/Lang/languages";

const {tm} = useI18n({
    inheritLocale: true,
    messages: authTranslates
})

defineProps({
    status: String,
});
</script>

<template>
    <Head :title="tm('forgotPassword')" />

    <t-forgot
        :status="status"
    >
        <template #greeting>
            {{ tm('forgotPassword') }}
        </template>

        <template #subGreeting>
            {{ tm('forgotPasswordSubGreeting') }}
        </template>
    </t-forgot>
</template>


================================================
FILE: resources/js/Pages/Auth/Lock.vue
================================================
<template>
    <t-lock
        color="gradient-purple-to-pink"
        :radius="5"
        bg-image="/img/samples/bgFakurianDesign-nY14Fs8pxT8-unsplash.jpg"
        button-color="pink"
    >
    </t-lock>
</template>

<script>
import TLock from "@/Components/Auth/TLock.vue";
export default {
    name: "Lock",
    components: {TLock}
}
</script>


================================================
FILE: resources/js/Pages/Auth/Login.vue
================================================
<template>
    <Head :title="tm('login')"/>
    <t-login
        :status="status"
        :can-reset-password="canResetPassword"
    >
    </t-login>
</template>

<script>

/*Main functions*/
import {defineComponent} from "vue";
import { Head } from "@inertiajs/vue3";

/*Components*/
import TLogin from "@/Components/Auth/TLogin.vue";

/* Multi language */
import {useI18n} from "vue-i18n";
import {authTranslates} from "@/Lang/languages";

export default defineComponent({
    props: {
        canResetPassword: Boolean,
        status: String,
    },
    components: {
        TLogin,
        Head
    },
    setup(){
        const {t,tm} = useI18n({
            inheritLocale: true,
            messages: authTranslates
        })

        return {t, tm}
    }
})
</script>


================================================
FILE: resources/js/Pages/Auth/Policy.vue
================================================
<template>
    <app-layout title="Privacy Policy">
        <div class="max-w-3xl mx-auto py-12 px-6">
            <h1 class="text-3xl font-bold mb-6">Privacy Policy</h1>
            <div class="prose dark:prose-invert">
                <p>
                    Welcome to our Privacy Policy page. Please read carefully.
                </p>
                <h2>Section 1: Data Collection</h2>
                <p>
                    We collect personal data to provide and improve our services.
                </p>
                <h2>Section 2: Data Usage</h2>
                <p>
                    Your data is used in accordance with this policy and applicable laws.
                </p>
                <!-- Daha fazla bölüm ekleyebilirsiniz -->
            </div>
        </div>
    </app-layout>
</template>

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue'
</script>


================================================
FILE: resources/js/Pages/Auth/Register.vue
================================================
<template>
    <Head :title="tm('register')" />
    <t-register
        :privacyPolicyFeature="$page.props.jetstream.hasTermsAndPrivacyPolicyFeature"
        :termsLink="'/terms'"
        :policyLink="'/privacy-policy'"
    />
</template>

<script setup>

/*Main functions*/
import {defineComponent} from "vue";
import { Head, Link, useForm } from '@inertiajs/vue3';


/*Components*/
import TRegister from "@/Components/Auth/TRegister.vue";

/* Multi language */
import {useI18n} from "vue-i18n";
import {authTranslates} from "@/Lang/languages";

const {t,tm} = useI18n({
    inheritLocale: true,
    messages: authTranslates
})
</script>


================================================
FILE: resources/js/Pages/Auth/ResetPassword.vue
================================================
<script setup>
import { Head, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Jetstream/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Jetstream/AuthenticationCardLogo.vue';
import InputError from '@/Jetstream/InputError.vue';
import InputLabel from '@/Jetstream/InputLabel.vue';
import PrimaryButton from '@/Jetstream/PrimaryButton.vue';
import TextInput from '@/Jetstream/TextInput.vue';

const props = defineProps({
    email: String,
    token: String,
});

const form = useForm({
    token: props.token,
    email: props.email,
    password: '',
    password_confirmation: '',
});

const submit = () => {
    form.post(route('password.update'), {
        onFinish: () => form.reset('password', 'password_confirmation'),
    });
};
</script>

<template>
    <Head title="Reset Password" />

    <AuthenticationCard>
        <template #logo>
            <AuthenticationCardLogo />
        </template>

        <form @submit.prevent="submit">
            <div>
                <InputLabel for="email" value="Email" />
                <TextInput
                    id="email"
                    v-model="form.email"
                    type="email"
                    class="mt-1 block w-full"
                    required
                    autofocus
                    autocomplete="username"
                />
                <InputError class="mt-2" :message="form.errors.email" />
            </div>

            <div class="mt-4">
                <InputLabel for="password" value="Password" />
                <TextInput
                    id="password"
                    v-model="form.password"
                    type="password"
                    class="mt-1 block w-full"
                    required
                    autocomplete="new-password"
                />
                <InputError class="mt-2" :message="form.errors.password" />
            </div>

            <div class="mt-4">
                <InputLabel for="password_confirmation" value="Confirm Password" />
                <TextInput
                    id="password_confirmation"
                    v-model="form.password_confirmation"
                    type="password"
                    class="mt-1 block w-full"
                    required
                    autocomplete="new-password"
                />
                <InputError class="mt-2" :message="form.errors.password_confirmation" />
            </div>

            <div class="flex items-center justify-end mt-4">
                <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                    Reset Password
                </PrimaryButton>
            </div>
        </form>
    </AuthenticationCard>
</template>


================================================
FILE: resources/js/Pages/Auth/Terms.vue
================================================
<template>
    <app-layout title="Terms & Conditions">
        <div class="max-w-3xl mx-auto py-12 px-6">
            <h1 class="text-3xl font-bold mb-6">Terms & Conditions</h1>
            <div class="prose dark:prose-invert">
                <p>
                    Welcome to our Terms & Conditions page. Please read carefully.
                </p>
                <h2>Section 1: Usage</h2>
                <p>
                    You must agree to these terms to use our service.
                </p>
                <h2>Section 2: Privacy</h2>
                <p>
                    Your privacy is important to us. Please review our policy.
                </p>
                <!-- Daha fazla bölüm ekleyebilirsiniz -->
            </div>
        </div>
    </app-layout>
</template>

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue'
</script>


================================================
FILE: resources/js/Pages/Auth/TwoFactorChallenge.vue
================================================
<script setup>
import { nextTick, ref } from 'vue';
import { Head, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Jetstream/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Jetstream/AuthenticationCardLogo.vue';
import InputError from '@/Jetstream/InputError.vue';
import InputLabel from '@/Jetstream/InputLabel.vue';
import PrimaryButton from '@/Jetstream/PrimaryButton.vue';
import TextInput from '@/Jetstream/TextInput.vue';

const recovery = ref(false);

const form = useForm({
    code: '',
    recovery_code: '',
});

const recoveryCodeInput = ref(null);
const codeInput = ref(null);

const toggleRecovery = async () => {
    recovery.value ^= true;

    await nextTick();

    if (recovery.value) {
        recoveryCodeInput.value.focus();
        form.code = '';
    } else {
        codeInput.value.focus();
        form.recovery_code = '';
    }
};

const submit = () => {
    form.post(route('two-factor.login'));
};
</script>

<template>
    <Head title="Two-factor Confirmation" />

    <AuthenticationCard>
        <template #logo>
            <AuthenticationCardLogo />
        </template>

        <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
            <template v-if="! recovery">
                Please confirm access to your account by entering the authentication code provided by your authenticator application.
            </template>

            <template v-else>
                Please confirm access to your account by entering one of your emergency recovery codes.
            </template>
        </div>

        <form @submit.prevent="submit">
            <div v-if="! recovery">
                <InputLabel for="code" value="Code" />
                <TextInput
                    id="code"
                    ref="codeInput"
                    v-model="form.code"
                    type="text"
                    inputmode="numeric"
                    class="mt-1 block w-full"
                    autofocus
                    autocomplete="one-time-code"
                />
                <InputError class="mt-2" :message="form.errors.code" />
            </div>

            <div v-else>
                <InputLabel for="recovery_code" value="Recovery Code" />
                <TextInput
                    id="recovery_code"
                    ref="recoveryCodeInput"
                    v-model="form.recovery_code"
                    type="text"
                    class="mt-1 block w-full"
                    autocomplete="one-time-code"
                />
                <InputError class="mt-2" :message="form.errors.recovery_code" />
            </div>

            <div class="flex items-center justify-end mt-4">
                <button type="button" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 underline cursor-pointer" @click.prevent="toggleRecovery">
                    <template v-if="! recovery">
                        Use a recovery code
                    </template>

                    <template v-else>
                        Use an authentication code
                    </template>
                </button>

                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                    Log in
                </PrimaryButton>
            </div>
        </form>
    </AuthenticationCard>
</template>


================================================
FILE: resources/js/Pages/Auth/VerifyEmail.vue
================================================
<script setup>
import { computed } from 'vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Jetstream/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Jetstream/AuthenticationCardLogo.vue';
import PrimaryButton from '@/Jetstream/PrimaryButton.vue';

const props = defineProps({
    status: String,
});

const form = useForm({});

const submit = () => {
    form.post(route('verification.send'));
};

const verificationLinkSent = computed(() => props.status === 'verification-link-sent');
</script>

<template>
    <Head title="Email Verification" />

    <AuthenticationCard>
        <template #logo>
            <AuthenticationCardLogo />
        </template>

        <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
            Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.
        </div>

        <div v-if="verificationLinkSent" class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
            A new verification link has been sent to the email address you provided in your profile settings.
        </div>

        <form @submit.prevent="submit">
            <div class="mt-4 flex items-center justify-between">
                <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                    Resend Verification Email
                </PrimaryButton>

                <div>
                    <Link
                        :href="route('profile.show')"
                        class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
                    >
                        Edit Profile</Link>

                    <Link
                        :href="route('logout')"
                        method="post"
                        as="button"
                        class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 ms-2"
                    >
                        Log Out
                    </Link>
                </div>
            </div>
        </form>
    </AuthenticationCard>
</template>


================================================
FILE: resources/js/Pages/Dashboard.vue
================================================
<template>
    <app-layout title="Dashboard" :header="tm('title')">
        <template #breadcrumb>
            <t-breadcrumb :breadcrumb-style="1" :breadcrumbs="breadcrumbs" color="white"/>
        </template>
        <template #default>
            <!--Statistical Widgets-->
            <grid-section :col="2">
                <!--With Icon, Down Direction-->
                <t-statistic-widget
                    color="solid-black"
                    diff-direction="down"
                    diff-value="15%"
                    widget-value="254">
                    <template #title>
                        <span v-text="tm('incomes')"/>
                    </template>
                    <template #icon>
                        <t-cash-icon class="w-16 h-16"/>
                    </template>
                </t-statistic-widget>
                <!--With Icon, Up Direction-->
                <t-statistic-widget
                    :radius="5"
                    color="solid-green"
                    diff-direction="up"
                    diff-value="8"
                    widget-value="30">
                    <template #title>
                        <span v-text="tm('dailyDoneCharts')"/>
                    </template>
                    <template #icon>
                        <t-shopping-bag-icon class="w-16 h-16"/>
                    </template>
                </t-statistic-widget>
                <!--Simple-->
                <t-statistic-widget
                    :radius="5"
                    color="solid-red"
                    diff-direction="down"
                    diff-value="8%"
                    widget-value="12.254,05 TL">
                    <template #title>
                        <span v-text="tm('refunds')"/>
                    </template>
                </t-statistic-widget>
                <!--With Picture, Down Direction-->
                <t-statistic-widget
                    :radius="5"
                    color="solid-white"
                    diff-direction="down"
                    diff-value="15%"
                    widget-value="254 USD">
                    <template #title>
                        <span v-text="tm('stationeryCost')"/>
                    </template>
                    <template #picture>
                        <img :src="'/img/samples/imgMelBaylon-6WLcOFn4HKE-unsplash.jpg'">
                    </template>
                </t-statistic-widget>
            </grid-section>
            <!--Content Box-->
            <grid-section :col="3">
                <!--List-->
                <t-content-card :width="1">
                    <template #title>
                        <span v-text="tm('userList')"/>
                    </template>
                    <template #content>
                        <t-list :radius="3" class="w-full" design="light" color="white" border>
                            <t-list-item>
                                <template #icon>
                                    <t-avatar :radius="8" :size="2" src="https://i.pravatar.cc/150?u=1"></t-avatar>
                                </template>
                                <template #default>{{tm('name1')}}</template>
                            </t-list-item>
                            <t-list-item>
                                <template #icon>
                                    <t-avatar :radius="8" :size="2" src="https://i.pravatar.cc/150?u=2"></t-avatar>
                                </template>
                                <template #default>{{tm('name2')}}</template>
                            </t-list-item>
                            <t-list-item>
                                <template #icon>
                                    <t-avatar :radius="8" :size="2" src="https://i.pravatar.cc/150?u=3"></t-avatar>
                                </template>
                                <template #default>{{tm('name3')}}</template>
                            </t-list-item>
                            <t-list-item>
                                <template #icon>
                                    <t-avatar :radius="8" :size="2" src="https://i.pravatar.cc/150?u=4"></t-avatar>
                                </template>
                                <template #default>{{tm('name4')}}</template>
                            </t-list-item>
                        </t-list>
                    </template>
                </t-content-card>
                <t-content-card :width="2">
                    <template #title>
                        <span v-text="tm('activeProjects')"/>
                    </template>
                    <template #content>
                        <!--Table-->
                        <t-table
                            :content="tableContent"
                            :header="tableHeader"
                            :features="tableFeatures"
                        >
                            <template #status="{props}">
                                <div class="flex justify-center">
                                    <t-progress :model-value="props.status" color="green"/>
                                </div>
                            </template>
                        </t-table>
                    </template>
                </t-content-card>
            </grid-section>
            <!--Alerts-->
            <grid-section :col-tablet="3">
                <!--Red-Deleted-->
                <t-alert design="filled" :closeable="true" color="danger">
                    <template #icon>
                        <t-trash-icon slot="icon" class="w-6 h-6"/>
                    </template>
                    <span v-text="tm('alertDeleted')"/>
                </t-alert>
                <!--Blue-Info-->
                <t-alert design="inline" color="info">
                    <template #icon>
                        <t-information-circle-icon class="w-6 h-6"/>
                    </template>
                    <span v-text="tm('alertOverwrite')"/>
                </t-alert>
                <!--Green Success-->
                <t-alert design="outline" color="success">
                    <template #icon>
                        <t-check-circle-icon class="w-6 h-6"/>
                    </template>
                    <span v-text="tm('alertSaved')"/>
                </t-alert>
            </grid-section>
            <!--Rich Alerts-->
            <grid-section :col-tablet="2">
                <t-alert :radius="3" design="gradient" color="fuchsia" :closeable="true">
                    <template #icon>
                        <t-avatar :radius="8" :size="3" src="https://i.pravatar.cc/300"/>
                    </template>
                    <span v-html="tm('alertNewUser')"/>
                </t-alert>
                <t-alert
                    :radius="3"
                    design="elegant"
                    :title="tm('alertDeletedUserTitle')"
                    color="warning"
                    :closeable="true"
                >
                    <span v-html="tm('alertDeletedUser')"/>
                </t-alert>
            </grid-section>
        </template>
    </app-layout>
</template>

<script>
/*Main functions*/
import {defineComponent, reactive} from "vue";

/*Components*/
import AppLayout from "@/Layouts/AppLayout.vue";
import GridSection from "@/Layouts/GridSection.vue";
import TStatisticWidget from "@/Components/Card/TStatisticWidget.vue";
import TCashIcon from "@/Components/Icon/TCashIcon.vue";
import TShoppingBagIcon from "@/Components/Icon/TShoppingBagIcon.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";
import TList from "@/Components/List/TList.vue";
import TListItem from "@/Components/List/TListItem.vue";
import TAvatar from "@/Components/Avatar/TAvatar.vue";
import TTable from "@/Components/Table/TTable.vue";
import TBreadcrumb from "@/Components/Breadcrumb/TBreadcrumb.vue";
import TProgress from "@/Components/Progress/TProgress.vue";
import TAlert from "@/Components/Alert/TAlert.vue";
import TInformationCircleIcon from "@/Components/Icon/TInformationCircleIcon.vue";
import TTrashIcon from "@/Components/Icon/TTrashIcon.vue";
import TCheckCircleIcon from "@/Components/Icon/TCheckCircleIcon.vue";

/*Multi language*/
import {useI18n} from "vue-i18n";

export default defineComponent({
    components: {
        AppLayout,
        TCheckCircleIcon,
        TTrashIcon,
        TInformationCircleIcon,
        TAlert,
        TProgress,
        TBreadcrumb,
        TTable,
        TAvatar,
        TListItem,
        TList,
        TContentCard,
        TShoppingBagIcon,
        TCashIcon,
        TStatisticWidget,
        GridSection
    },
    setup() {
        const {tm} = useI18n({
            messages: {
                bg: {
                    title: "Добре дошли в Anemon",
                    home: "Дом",
                    dashboard: "Табло за управление",
                    incomes: "Доходи",
                    dailyDoneCharts: "Дневни графики",
                    refunds: "Възстановявания",
                    stationeryCost: "Възстановяване на средства",
                    userList: "Списък с потребители",
                    activeProjects: "Активни проекти",
                    name: "Име",
                    startDate: "Начална дата",
                    endDate: "Крайна дата",
                    status: "Състояние",
                    simpleSearch: "Просто търсене",
                    name1: "Siyan Alekov Hristov",
                    name2: "Brayko Vasilov Atanasov",
                    name3: "Mihaela Demitrova Tsankova",
                    name4: "Tanya Iskrenova Adamova",
                    alertDeleted: "Потребителят е изтрит успешно, щракнете върху мен",
                    alertOverwrite: "Всички промени се презаписват върху себе си",
                    alertSaved: "Нов елемент е запазен успешно",
                    alertNewUser: "Новият потребител е добавен успешно\n" +
                        "<b>Потребител:</b> Sinan AYDOĞAN",
                    alertDeletedUserTitle: "предупреждение",
                    alertDeletedUser: "Потребителят е изтрит успешно\n" +
                        "<b>Потребител:</b> Zuhal TAŞÇI"
                },
                de: {
                    title: "Willkommen bei Anemon",
                    home: "zu Hause",
                    dashboard: "Dashboard",
                    incomes: "Einkommen",
                    dailyDoneCharts: "Daily Done Charts",
                    refunds: "Rückerstattungen",
                    stationeryCost: "Erstattungen",
                    userList: "Benutzerliste",
                    activeProjects: "Aktive Projekte",
                    name: "Name",
                    startDate: "Startdatum",
                    endDate: "Enddatum",
                    status: "Zustand",
                    simpleSearch: "Einfache Suche",
                    name1: "Siyan Alekov Hristov",
                    name2: "Victor Bergius",
                    name3: "Jessi Nachtigal",
                    name4: "Silvia Krauss",
                    alertDeleted: "Der Benutzer wurde erfolgreich gelöscht, klick mich an",
                    alertOverwrite: "Alle Änderungen überschreiben sich selbst",
                    alertSaved: "Neues Element erfolgreich gespeichert",
                    alertNewUser: "Der neue Benutzer wurde erfolgreich hinzugefügt." +
                        "<br/><b>Benutzer:</b> Sinan AYDOĞAN",
                    alertDeletedUserTitle: "Warnung",
                    alertDeletedUser: "Der Benutzer wurde erfolgreich gelöscht" +
                        "<br/><b>Benutzer:</b> Zuhal TAŞÇI"
                },
                en: {
                    title: "Welcome to Anemon",
                    home: "Home",
                    dashboard: "Dashboard",
                    incomes: "Incomes",
                    dailyDoneCharts: "Daily Done Charts",
                    refunds: "Refunds",
                    stationeryCost: "Refunds",
                    userList: "Users List",
                    activeProjects: "Active Projects",
                    name: "Name",
                    startDate: "Start Date",
                    endDate: "End Date",
                    status: "Status",
                    simpleSearch: "Simple Search",
                    name1: "Sinem Aydoğan",
                    name2: "Reema Oconnor",
                    name3: "Mia-Rose Justice",
                    name4: "Louise Watts",
                    alertDeleted: "The user deleted successfully,click me",
                    alertOverwrite: "The all of changes overwrite to themself",
                    alertSaved: "New item saved successfully",
                    alertNewUser: "The new user is successfully added." +
                        "<br/><b>User:</b> Sinan AYDOĞAN",
                    alertDeletedUserTitle: "warning",
                    alertDeletedUser: "The user deleted successfully" +
                        "<br/><b>User:</b> Zuhal TAŞÇI"
                },
                tr: {
                    title: "Anemon'a Hoşgeldiniz",
                    home: "Ana Sayfa",
                    dashboard: "Panel",
                    incomes: "Gelirler",
                    dailyDoneCharts: "Günlük Tamamlanan",
                    refunds: "Geri İadeler",
                    stationeryCost: "Kırtasiye Gideri",
                    userList: "Kullanıcılar",
                    activeProjects: "Aktif Projeler",
                    name: "İsim",
                    startDate: "Başlangıç",
                    endDate: "Bitiş",
                    status: "Durum",
                    simpleSearch: "Arama",
                    name1: "Sinem Aydoğan",
                    name2: "Zuhal Taşçı",
                    name3: "Ayşe Gürel",
                    name4: "Günel Deren",
                    alertDeleted: "Kullanıcı başarıyla silindi",
                    alertOverwrite: "Tüm değişikler var olan kayıdın üzerine yazılacak",
                    alertSaved: "Yeni içerik başarıyla eklendi",
                    alertNewUser: "Yeni kullanıcı başarıyla eklendi\n" +
                        "<b>Kullanıcı:</b> Sinan AYDOĞAN",
                    alertDeletedUserTitle: "uyarı",
                    alertDeletedUser: "Kullanıcı başarıyla silindi\n" +
                        "<b>Kullanıcı:</b> Zuhal TAŞÇI"
                },
                ru: {
                    title: "Добро пожаловать в Анемон",
                    home: "Дом",
                    dashboard: "Панель приборов",
                    incomes: "Доходы",
                    dailyDoneCharts: "Ежедневные диаграммы",
                    refunds: "Возвраты",
                    stationeryCost: "Возврат",
                    userList: "Список пользователей",
                    activeProjects: "Активные проекты",
                    name: "Имя",
                    startDate: "Дата начала",
                    endDate: "Дата окончания",
                    status: "Статус",
                    simpleSearch: "Простой поиск",
                    name1: "Siyan Alekov Hristov",
                    name2: "Shepkin Onufri Victorovich",
                    name3: "Eybozhenko Lada Nikolayevna",
                    name4: "Mager Vlada Makarovna",
                    alertDeleted: "Пользователь успешно удален, нажмите на меня",
                    alertOverwrite: "Все изменения перезаписываются на себя",
                    alertSaved: "Новый элемент успешно сохранен",
                    alertNewUser: "Новый пользователь успешно добавлен." +
                        "<br/><b>Пользователь:</b> Синан АЙДОГАН",
                    alertDeletedUserTitle: "предупреждение",
                    alertDeletedUser: "Пользователь успешно удален" +
                        "<br/><b>Пользователь:</b> Зухал ТАШИ"
                },
                zh: {
                    title: "欢迎来到海葵",
                    home: "家",
                    dashboard: "仪表板",
                    incomes: "收入",
                    dailyDoneCharts: "每日完成图表",
                    refunds: "退款",
                    stationeryCost: "退款",
                    userList: "用户列表",
                    activeProjects: "活动项目",
                    name: "名称",
                    startDate: "开始日期",
                    endDate: "结束日期",
                    status: "状态",
                    simpleSearch: "简单搜索",
                    name1: "Siyan Alekov Hristov",
                    name2: "Yuan Lei",
                    name3: "Liao Rong",
                    name4: "Zhu Chang",
                    alertDeleted: "用户删除成功，点我",
                    alertOverwrite: "所有更改都覆盖到自己",
                    alertSaved: "新项目保存成功",
                    alertNewUser: "新用户添加成功。." +
                        "<br/><b>用户:</b> Sinan AYDOĞAN",
                    alertDeletedUserTitle: "警告",
                    alertDeletedUser: "用户删除成功" +
                        "<br/><b>用户:</b> Zuhal TAŞÇI"
                },
            }
        });
        const breadcrumbs = reactive([
            {label: tm("home"), link: "/", active: false},
            {label: tm("dashboard"), link: "", active: true, activeColor: "blue"}
        ]);
        const tableHeader = reactive([
            {key: "id", label: "ID", align: "center"},
            {key: "name", label: "Name", align: "left", searchable: true, status: true},
            {key: "start", label: "Start Date", align: "left", status: true},
            {key: "end", label: "End Date", align: "left", status: true},
            {key: "status", label: "Status", align: "center", status: true}
        ])
        const tableContent = reactive([
            {id: 1, name: "VueJS Components", start: "01.03.2021", end: "14.09.2021", status: 10},
            {id: 2, name: "Custom Style Optimize", start: "02.05.2021", end: "25.08.2021", status: 20},
            {id: 3, name: "Error Management", start: "25.04.2021", end: "30.12.2021", status: 70}
        ])
        const tableFeatures = reactive({
            table: {
                design: 'elegant',
                rowBorder: true,
                zebraRow: true,
                radius: 3,
                perPage: 5
            },
            pagination: {
                status: true,
                radius: 3,
                range: 5,
                jump: true,
                nextText: "Sonraki",
                previousText: "Önceki",
                detailText: "Sayfa: $a - $b"
            },
            actions: {
                status: true,
                headerText: "Aksiyonlar"
            },
            deleteModal: {
                headerText: "Item's deleting",
                contentText: "You are going to delete <br><b></b><br>Are you sure ?",
                icon: "warning"
            }
        });
        return {tm, breadcrumbs, tableHeader, tableContent, tableFeatures};
    }
});
</script>


================================================
FILE: resources/js/Pages/PrivacyPolicy.vue
================================================
<template>
    <Head title="Privacy Policy" />

    <div class="font-sans text-gray-900 antialiased">
        <div class="pt-4 bg-gray-100">
            <div class="min-h-screen flex flex-col items-center pt-6 sm:pt-0">
                <div>
                    <jet-authentication-card-logo />
                </div>

                <div v-html="policy" class="w-full sm:max-w-2xl mt-6 p-6 bg-white shadow-md overflow-hidden sm:rounded-lg prose">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { Head } from '@inertiajs/vue3';
import JetAuthenticationCardLogo from '@/Jetstream/AuthenticationCardLogo.vue'

const policy = `
    <h1>Privacy Policy</h1>
    <p>Your privacy is important to us. This Privacy Policy explains how we collect, use, and protect your information when you use our services.</p>
    <h2>Information We Collect</h2>
    <ul>
        <li>Personal information you provide when registering or using our site.</li>
        <li>Usage data and cookies to improve your experience.</li>
    </ul>
    <h2>How We Use Information</h2>
    <ul>
        <li>To provide and maintain our services.</li>
        <li>To communicate with you and improve our offerings.</li>
    </ul>
    <h2>Data Protection</h2>
    <p>We implement security measures to safeguard your data. Your information is not shared with third parties except as required by law.</p>
    <h2>Contact</h2>
    <p>If you have any questions about this policy, please contact us.</p>
`;
</script>


================================================
FILE: resources/js/Pages/Profile/Partials/DarkModePreferenceForm.vue
================================================
<script setup>
import { useForm } from "@inertiajs/vue3";
import ActionMessage from "@/Jetstream/ActionMessage.vue";
import FormSection from "@/Jetstream/FormSection.vue";
import InputError from "@/Jetstream/InputError.vue";
import PrimaryButton from "@/Jetstream/PrimaryButton.vue";
import { faSun, faMoon, faPalette } from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
import { watch } from "vue";
import { useDarkModeStore } from "@/Stores/darkMode";

library.add(faSun, faMoon, faPalette);

const props = defineProps({
    user: Object
});

const form = useForm({
    dark_mode: props.user.dark_mode
});

/*Dark Mode*/
const darkModeStore= useDarkModeStore();
const { changeThemeUser} = darkModeStore;

const updateDarkModePreference = () => {
    form.put(route("user.dark-mode-preference.update"), {
        errorBag: "updateDarkModePreference",
        preserveScroll: true,
        onSuccess: () => {
            changeThemeUser(form.dark_mode);
        }
    });
};

watch(() => props.user, (value) => {
    form.dark_mode = value.dark_mode;
});
</script>

<template>
    <FormSection @submitted="updateDarkModePreference">
        <template #title>
            Update Dark Mode Preference
        </template>

        <template #description>
            Update your preferred dark mode.
        </template>

        <template #form>
            <div class="flex justify-start items-center space-x-4 dark:text-slate-100">
                <!-- Light -->
                <div
                    @click="form.dark_mode = 'light'"
                    class="flex cursor-pointer px-2 py-1 rounded"
                    :class="{
                    'bg-yellow-500 text-slate-50' : form.dark_mode  === 'light',
                    'text-yellow-500' : form.dark_mode  !== 'light',
                    }"
                >
                    <span>
                        <icon
                            icon="sun"
                            size="lg"
                            key="light"
                            class="transform hover:scale-110 active:scale-90 transition-all duration-300"
                        />
                    </span>
                    <span v-if="form.dark_mode === 'light'" class="ml-3 whitespace-nowrap"
                          v-text="$t('lightMode')"></span>
                </div>
                <!-- Auto -->
                <div
                    @click="form.dark_mode = 'auto'"
                    class="flex cursor-pointer px-2 py-1 rounded"
                    :class="{
                    'bg-sky-700 text-slate-50' : form.dark_mode  === 'auto',
                    'text-sky-700' : form.dark_mode  !== 'auto',
                    }"
                >
                    <span>
                        <icon
                            icon="palette"
                            size="lg"
                            key="auto"
                            class="transform hover:scale-110 active:scale-90 transition-all duration-300"
                        />
                    </span>
                    <span v-if="form.dark_mode === 'auto'" class="ml-3 whitespace-nowrap" v-text="$t('auto')"></span>
                </div>


                <!-- Dark -->
                <div
                    @click="form.dark_mode = 'dark'"
                    class="flex cursor-pointer px-2 py-1 rounded"
                    :class="{
                    'bg-slate-700 text-slate-50' : form.dark_mode  === 'dark',
                    'text-slate-700' : form.dark_mode  !== 'dark',

                    }"
                >
                    <span>
                        <icon
                            icon="moon"
                            size="lg"
                            key="dark"
                            class="transform hover:scale-110 active:scale-90 transition-all duration-300"
                        />
                    </span>
                    <span v-if="form.dark_mode === 'dark'" class="ml-3 whitespace-nowrap"
                          v-text="$t('darkMode')"></span>
                </div>

            </div>
            <InputError :message="form.errors.dark_mode" class="mt-2" />
        </template>

        <template #actions>
            <ActionMessage :on="form.recentlySuccessful" class="me-3">
                Saved.
            </ActionMessage>

            <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                Save
            </PrimaryButton>
        </template>
    </FormSection>
</template>


================================================
FILE: resources/js/Pages/Profile/Partials/DeleteUserForm.vue
================================================
<script setup>
import { ref } from 'vue';
import { useForm } from '@inertiajs/vue3';
import ActionSection from '@/Jetstream/ActionSection.vue';
import DangerButton from '@/Jetstream/DangerButton.vue';
import DialogModal from '@/Jetstream/DialogModal.vue';
import InputError from '@/Jetstream/InputError.vue';
import SecondaryButton from '@/Jetstream/SecondaryButton.vue';
import TextInput from '@/Jetstream/TextInput.vue';

const confirmingUserDeletion = ref(false);
const passwordInput = ref(null);

const form = useForm({
    password: '',
});

const confirmUserDeletion = () => {
    confirmingUserDeletion.value = true;

    setTimeout(() => passwordInput.value.focus(), 250);
};

const deleteUser = () => {
    form.delete(route('current-user.destroy'), {
        preserveScroll: true,
        onSuccess: () => closeModal(),
        onError: () => passwordInput.value.focus(),
        onFinish: () => form.reset(),
    });
};

const closeModal = () => {
    confirmingUserDeletion.value = false;

    form.reset();
};
</script>

<template>
    <ActionSection>
        <template #title>
            Delete Account
        </template>

        <template #description>
            Permanently delete your account.
        </template>

        <template #content>
            <div class="max-w-xl text-sm text-gray-600 dark:text-gray-400">
                Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.
            </div>

            <div class="mt-5">
                <DangerButton @click="confirmUserDeletion">
                    Delete Account
                </DangerButton>
            </div>

            <!-- Delete Account Confirmation Modal -->
            <DialogModal :show="confirmingUserDeletion" @close="closeModal">
                <template #title>
                    Delete Account
                </template>

                <template #content>
                    Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.

                    <div class="mt-4">
                        <TextInput
                            ref="passwordInput"
                            v-model="form.password"
                            type="password"
                            class="mt-1 block w-3/4"
                            placeholder="Password"
                            autocomplete="current-password"
                            @keyup.enter="deleteUser"
                        />

                        <InputError :message="form.errors.password" class="mt-2" />
                    </div>
                </template>

                <template #footer>
                    <SecondaryButton @click="closeModal">
                        Cancel
                    </SecondaryButton>

                    <DangerButton
                        class="ms-3"
                        :class="{ 'opacity-25': form.processing }"
                        :disabled="form.processing"
                        @click="deleteUser"
                    >
                        Delete Account
                    </DangerButton>
                </template>
            </DialogModal>
        </template>
    </ActionSection>
</template>


================================================
FILE: resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
================================================
<script setup>
import { ref } from 'vue';
import { useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Jetstream/ActionMessage.vue';
import ActionSection from '@/Jetstream/ActionSection.vue';
import DialogModal from '@/Jetstream/DialogModal.vue';
import InputError from '@/Jetstream/InputError.vue';
import PrimaryButton from '@/Jetstream/PrimaryButton.vue';
import SecondaryButton from '@/Jetstream/SecondaryButton.vue';
import TextInput from '@/Jetstream/TextInput.vue';

defineProps({
    sessions: Array,
});

const confirmingLogout = ref(false);
const passwordInput = ref(null);

const form = useForm({
    password: '',
});

const confirmLogout = () => {
    confirmingLogout.value = true;

    setTimeout(() => passwordInput.value.focus(), 250);
};

const logoutOtherBrowserSessions = () => {
    form.delete(route('other-browser-sessions.destroy'), {
        preserveScroll: true,
        onSuccess: () => closeModal(),
        onError: () => passwordInput.value.focus(),
        onFinish: () => form.reset(),
    });
};

const closeModal = () => {
    confirmingLogout.value = false;

    form.reset();
};
</script>

<template>
    <ActionSection>
        <template #title>
            Browser Sessions
        </template>

        <template #description>
            Manage and log out your active sessions on other browsers and devices.
        </template>

        <template #content>
            <div class="max-w-xl text-sm text-gray-600 dark:text-gray-400">
                If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.
            </div>

            <!-- Other Browser Sessions -->
            <div v-if="sessions.length > 0" class="mt-5 space-y-6">
                <div v-for="(session, i) in sessions" :key="i" class="flex items-center">
                    <div>
                        <svg v-if="session.agent.is_desktop" class="w-8 h-8 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
                        </svg>

                        <svg v-else class="w-8 h-8 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
                        </svg>
                    </div>

                    <div class="ms-3">
                        <div class="text-sm text-gray-600 dark:text-gray-400">
                            {{ session.agent.platform ? session.agent.platform : 'Unknown' }} - {{ session.agent.browser ? session.agent.browser : 'Unknown' }}
                        </div>

                        <div>
                            <div class="text-xs text-gray-500">
                                {{ session.ip_address }},

                                <span v-if="session.is_current_device" class="text-green-500 font-semibold">This device</span>
                                <span v-else>Last active {{ session.last_active }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex items-center mt-5">
                <PrimaryButton @click="confirmLogout">
                    Log Out Other Browser Sessions
                </PrimaryButton>

                <ActionMessage :on="form.recentlySuccessful" class="ms-3">
                    Done.
                </ActionMessage>
            </div>

            <!-- Log Out Other Devices Confirmation Modal -->
            <DialogModal :show="confirmingLogout" @close="closeModal">
                <template #title>
                    Log Out Other Browser Sessions
                </template>

                <template #content>
                    Please enter your password to confirm you would like to log out of your other browser sessions across all of your devices.

                    <div class="mt-4">
                        <TextInput
                            ref="passwordInput"
                            v-model="form.password"
                            type="password"
                            class="mt-1 block w-3/4"
                            placeholder="Password"
                            autocomplete="current-password"
                            @keyup.enter="logoutOtherBrowserSessions"
                        />

                        <InputError :message="form.errors.password" class="mt-2" />
                    </div>
                </template>

                <template #footer>
                    <SecondaryButton @click="closeModal">
                        Cancel
                    </SecondaryButton>

                    <PrimaryButton
                        class="ms-3"
                        :class="{ 'opacity-25': form.processing }"
                        :disabled="form.processing"
                        @click="logoutOtherBrowserSessions"
                    >
                        Log Out Other Browser Sessions
                    </PrimaryButton>
                </template>
            </DialogModal>
        </template>
    </ActionSection>
</template>


================================================
FILE: resources/js/Pages/Profile/Partials/PreferredLanguageForm.vue
================================================
<script setup>
import { useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Jetstream/ActionMessage.vue';
import FormSection from '@/Jetstream/FormSection.vue';
import InputError from '@/Jetstream/InputError.vue';
import PrimaryButton from '@/Jetstream/PrimaryButton.vue';
import {languages} from "@/Lang/languages";
import TInputSelect from "@/Components/Form/Inputs/TInputSelect.vue";
import { watch } from "vue";
import { useDisplayLanguageStore } from "@/Stores/displayLanguage.js";

const props = defineProps({
    user: Object
});

const form = useForm({
    language: props.user.language,
});

const updatePreferredLanguage = () => {
    form.put(route('user.preferred-language.update'), {
        errorBag: 'updatePreferredLanguage',
        preserveScroll: true,
        onSuccess: () => {
            changeLang(form.language);
        },
    });
};

/*Multi language*/
const displayLanguageStore = useDisplayLanguageStore();
const { changeLang } = displayLanguageStore;

watch(() => props.user, (value) => {
    form.language = value.language;
});
</script>

<template>
    <FormSection @submitted="updatePreferredLanguage">
        <template #title>
            Update Language Preference
        </template>

        <template #description>
            Update your preferred language.
        </template>

        <template #form>
            <div class="col-span-6 sm:col-span-4">
                <t-input-select
                    v-model="form.language"
                    :options="languages"
                    options-label-key="name"
                    options-value-key="id"
                    place-holder="Select Language"
                />
                <InputError :message="form.errors.language" class="mt-2" />
            </div>
        </template>

        <template #actions>
            <ActionMessage :on="form.recentlySuccessful" class="me-3">
                Saved.
            </ActionMessage>

            <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                Save
            </PrimaryButton>
        </template>
    </FormSection>
</template>


================================================
FILE: resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
================================================
<script setup>
import { ref, computed, watch } from 'vue';
import { router, useForm, usePage } from '@inertiajs/vue3';
import ActionSection from '@/Jetstream/ActionSection.vue';
import ConfirmsPassword from '@/Jetstream/ConfirmsPassword.vue';
import DangerButton from '@/Jetstream/DangerButton.vue';
import InputError from '@/Jetstream/InputError.vue';
import InputLabel from '@/Jetstream/InputLabel.vue';
import PrimaryButton from '@/Jetstream/PrimaryButton.vue';
import SecondaryButton from '@/Jetstream/SecondaryButton.vue';
import TextInput from '@/Jetstream/TextInput.vue';

const props = defineProps({
    requiresConfirmation: Boolean,
});

const page = usePage();
const enabling = ref(false);
const confirming = ref(false);
const disabling = ref(false);
const qrCode = ref(null);
const setupKey = ref(null);
const recoveryCodes = ref([]);

const confirmationForm = useForm({
    code: '',
});

const twoFactorEnabled = computed(
    () => ! enabling.value && page.props.auth.user?.two_factor_enabled,
);

watch(twoFactorEnabled, () => {
    if (! twoFactorEnabled.value) {
        confirmationForm.reset();
        confirmationForm.clearErrors();
    }
});

const enableTwoFactorAuthentication = () => {
    enabling.value = true;

    router.post(route('two-factor.enable'), {}, {
        preserveScroll: true,
        onSuccess: () => Promise.all([
            showQrCode(),
            showSetupKey(),
            showRecoveryCodes(),
        ]),
        onFinish: () => {
            enabling.value = false;
            confirming.value = props.requiresConfirmation;
        },
    });
};

const showQrCode = () => {
    return axios.get(route('two-factor.qr-code')).then(response => {
        qrCode.value = response.data.svg;
    });
};

const showSetupKey = () => {
    return axios.get(route('two-factor.secret-key')).then(response => {
        setupKey.value = response.data.secretKey;
    });
}

const showRecoveryCodes = () => {
    return axios.get(route('two-factor.recovery-codes')).then(response => {
        recoveryCodes.value = response.data;
    });
};

const confirmTwoFactorAuthentication = () => {
    confirmationForm.post(route('two-factor.confirm'), {
        errorBag: "confirmTwoFactorAuthentication",
        preserveScroll: true,
        preserveState: true,
        onSuccess: () => {
            confirming.value = false;
            qrCode.value = null;
            setupKey.value = null;
        },
    });
};

const regenerateRecoveryCodes = () => {
    axios
        .post(route('two-factor.recovery-codes'))
        .then(() => showRecoveryCodes());
};

const disableTwoFactorAuthentication = () => {
    disabling.value = true;

    router.delete(route('two-factor.disable'), {
        preserveScroll: true,
        onSuccess: () => {
            disabling.value = false;
            confirming.value = false;
        },
    });
};
</script>

<template>
    <ActionSection>
        <template #title>
            Two Factor Authentication
        </template>

        <template #description>
            Add additional security to your account using two factor authentication.
        </template>

        <template #content>
            <h3 v-if="twoFactorEnabled && ! confirming" class="text-lg font-medium text-gray-900 dark:text-gray-100">
                You have enabled two factor authentication.
            </h3>

            <h3 v-else-if="twoFactorEnabled && confirming" class="text-lg font-medium text-gray-900 dark:text-gray-100">
                Finish enabling two factor authentication.
            </h3>

            <h3 v-else class="text-lg font-medium text-gray-900 dark:text-gray-100">
                You have not enabled two factor authentication.
            </h3>

            <div class="mt-3 max-w-xl text-sm text-gray-600 dark:text-gray-400">
                <p>
                    When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.
                </p>
            </div>

            <div v-if="twoFactorEnabled">
                <div v-if="qrCode">
                    <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-400">
                        <p v-if="confirming" class="font-semibold">
                            To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.
                        </p>

                        <p v-else>
                            Two factor authentication is now enabled. Scan the following QR code using your phone's authenticator application or enter the setup key.
                        </p>
                    </div>

                    <div class="mt-4 p-2 inline-block bg-white" v-html="qrCode" />

                    <div v-if="setupKey" class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-400">
                        <p class="font-semibold">
                            Setup Key: <span v-html="setupKey"></span>
                        </p>
                    </div>

                    <div v-if="confirming" class="mt-4">
                        <InputLabel for="code" value="Code" />

                        <TextInput
                            id="code"
                            v-model="confirmationForm.code"
                            type="text"
                            name="code"
                            class="block mt-1 w-1/2"
                            inputmode="numeric"
                            autofocus
                            autocomplete="one-time-code"
                            @keyup.enter="confirmTwoFactorAuthentication"
                        />

                        <InputError :message="confirmationForm.errors.code" class="mt-2" />
                    </div>
                </div>

                <div v-if="recoveryCodes.length > 0 && ! confirming">
                    <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-400">
                        <p class="font-semibold">
                            Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.
                        </p>
                    </div>

                    <div class="grid gap-1 max-w-xl mt-4 px-4 py-4 font-mono text-sm bg-gray-100 dark:bg-gray-900 dark:text-gray-100 rounded-lg">
                        <div v-for="code in recoveryCodes" :key="code">
                            {{ code }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-5">
                <div v-if="! twoFactorEnabled">
                    <ConfirmsPassword @confirmed="enableTwoFactorAuthentication">
                        <PrimaryButton type="button" :class="{ 'opacity-25': enabling }" :disabled="enabling">
                            Enable
                        </PrimaryButton>
                    </ConfirmsPassword>
                </div>

                <div v-else>
                    <ConfirmsPassword @confirmed="confirmTwoFactorAuthentication">
                        <PrimaryButton
                            v-if="confirming"
                            type="button"
                            class="me-3"
                            :class="{ 'opacity-25': enabling }"
                            :disabled="enabling"
                        >
                            Confirm
                        </PrimaryButton>
                    </ConfirmsPassword>

                    <ConfirmsPassword @confirmed="regenerateRecoveryCodes">
                        <SecondaryButton
                            v-if="recoveryCodes.length > 0 && ! confirming"
                            class="me-3"
                        >
                            Regenerate Recovery Codes
                        </SecondaryButton>
                    </ConfirmsPassword>

                    <ConfirmsPassword @confirmed="showRecoveryCodes">
                        <SecondaryButton
                            v-if="recoveryCodes.length === 0 && ! confirming"
                            class="me-3"
                        >
                            Show Recovery Codes
                        </SecondaryButton>
                    </ConfirmsPassword>

                    <ConfirmsPassword @confirmed="disableTwoFactorAuthentication">
                        <SecondaryButton
                            v-if="confirming"
                            :class="{ 'opacity-25': disabling }"
                            :disabled="disabling"
                        >
                            Cancel
                        </SecondaryButton>
                    </ConfirmsPassword>

                    <ConfirmsPassword @confirmed="disableTwoFactorAuthentication">
                        <DangerButton
                            v-if="! confirming"
                            :class="{ 'opacity-25': disabling }"
                            :disabled="disabling"
                        >
                            Disable
                        </DangerButton>
                    </ConfirmsPassword>
                </div>
            </div>
        </template>
    </ActionSection>
</template>


================================================
FILE: resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
================================================
<script setup>
import { ref } from 'vue';
import { useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Jetstream/ActionMessage.vue';
import FormSection from '@/Jetstream/FormSection.vue';
import InputError from '@/Jetstream/InputError.vue';
import InputLabel from '@/Jetstream/InputLabel.vue';
import PrimaryButton from '@/Jetstream/PrimaryButton.vue';
import TextInput from '@/Jetstream/TextInput.vue';

const passwordInput = ref(null);
const currentPasswordInput = ref(null);

const form = useForm({
    current_password: '',
    password: '',
    password_confirmation: '',
});

const updatePassword = () => {
    form.put(route('user-password.update'), {
        errorBag: 'updatePassword',
        preserveScroll: true,
        onSuccess: () => form.reset(),
        onError: () => {
            if (form.errors.password) {
                form.reset('password', 'password_confirmation');
                passwordInput.value.focus();
            }

            if (form.errors.current_password) {
                form.reset('current_password');
                currentPasswordInput.value.focus();
            }
        },
    });
};
</script>

<template>
    <FormSection @submitted="updatePassword">
        <template #title>
            Update Password
        </template>

        <template #description>
            Ensure your account is using a long, random password to stay secure.
        </template>

        <template #form>
            <div class="col-span-6 sm:col-span-4">
                <InputLabel for="current_password" value="Current Password" />
                <TextInput
                    id="current_password"
                    ref="currentPasswordInput"
                    v-model="form.current_password"
                    type="password"
                    class="mt-1 block w-full"
                    autocomplete="current-password"
                />
                <InputError :message="form.errors.current_password" class="mt-2" />
            </div>

            <div class="col-span-6 sm:col-span-4">
                <InputLabel for="password" value="New Password" />
                <TextInput
                    id="password"
                    ref="passwordInput"
                    v-model="form.password"
                    type="password"
                    class="mt-1 block w-full"
                    autocomplete="new-password"
                />
                <InputError :message="form.errors.password" class="mt-2" />
            </div>

            <div class="col-span-6 sm:col-span-4">
                <InputLabel for="password_confirmation" value="Confirm Password" />
                <TextInput
                    id="password_confirmation"
                    v-model="form.password_confirmation"
                    type="password"
                    class="mt-1 block w-full"
                    autocomplete="new-password"
                />
                <InputError :message="form.errors.password_confirmation" class="mt-2" />
            </div>
        </template>

        <template #actions>
            <ActionMessage :on="form.recentlySuccessful" class="me-3">
                Saved.
            </ActionMessage>

            <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                Save
            </PrimaryButton>
        </template>
    </FormSection>
</template>


================================================
FILE: resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
================================================
<script setup>
import { ref } from "vue";
import { Link, router, useForm } from "@inertiajs/vue3";
import ActionMessage from "@/Jetstream/ActionMessage.vue";
import FormSection from "@/Jetstream/FormSection.vue";
import InputError from "@/Jetstream/InputError.vue";
import InputLabel from "@/Jetstream/InputLabel.vue";
import PrimaryButton from "@/Jetstream/PrimaryButton.vue";
import SecondaryButton from "@/Jetstream/SecondaryButton.vue";
import TextInput from "@/Jetstream/TextInput.vue";

const props = defineProps({
    user: Object
});

const form = useForm({
    _method: "PUT",
    name: props.user.name,
    email: props.user.email,
    photo: null
});

const verificationLinkSent = ref(null);
const photoPreview = ref(null);
const photoInput = ref(null);

const updateProfileInformation = () => {
    if (photoInput.value) {
        form.photo = photoInput.value.files[0];
    }

    form.post(route("user-profile-information.update"), {
        errorBag: "updateProfileInformation",
        preserveScroll: true,
        onSuccess: () => clearPhotoFileInput()
    });
};

const sendEmailVerification = () => {
    verificationLinkSent.value = true;
};

const selectNewPhoto = () => {
    photoInput.value.click();
};

const updatePhotoPreview = () => {
    const photo = photoInput.value.files[0];

    if (!photo) return;

    const reader = new FileReader();

    reader.onload = (e) => {
        photoPreview.value = e.target.result;
    };

    reader.readAsDataURL(photo);
};

const deletePhoto = () => {
    router.delete(route("current-user-photo.destroy"), {
        preserveScroll: true,
        onSuccess: () => {
            photoPreview.value = null;
            clearPhotoFileInput();
        }
    });
};

const clearPhotoFileInput = () => {
    if (photoInput.value?.value) {
        photoInput.value.value = null;
    }
};
</script>

<template>
    <FormSection @submitted="updateProfileInformation">
        <template #title>
            Profile Information
        </template>

        <template #description>
            Update your account's profile information and email address.
        </template>

        <template #form>
            <!-- Profile Photo -->
            <div v-if="$page.props.jetstream.managesProfilePhotos" class="col-span-6 sm:col-span-4">
                <!-- Profile Photo File Input -->
                <input
                    id="photo"
                    ref="photoInput"
                    type="file"
                    class="hidden"
                    @change="updatePhotoPreview"
                >

                <InputLabel for="photo" value="Photo" />

                <!-- Current Profile Photo -->
                <div v-show="! photoPreview" class="mt-2">
                    <img :src="user.profile_photo_url" :alt="user.name" class="rounded-full h-20 w-20 object-cover">
                </div>

                <!-- New Profile Photo Preview -->
                <div v-show="photoPreview" class="mt-2">
                    <span
                        class="block rounded-full w-20 h-20 bg-cover bg-no-repeat bg-center"
                        :style="'background-image: url(\'' + photoPreview + '\');'"
                    />
                </div>

                <SecondaryButton class="mt-2 me-2" type="button" @click.prevent="selectNewPhoto">
                    Select A New Photo
                </SecondaryButton>

                <SecondaryButton
                    v-if="user.profile_photo_path"
                    type="button"
                    class="mt-2"
                    @click.prevent="deletePhoto"
                >
                    Remove Photo
                </SecondaryButton>

                <InputError :message="form.errors.photo" class="mt-2" />
            </div>

            <!-- Name -->
            <div class="col-span-6 sm:col-span-4">
                <InputLabel for="name" value="Name" />
                <TextInput
                    id="name"
                    v-model="form.name"
                    type="text"
                    class="mt-1 block w-full"
                    required
                    autocomplete="name"
                />
                <InputError :message="form.errors.name" class="mt-2" />
            </div>

            <!-- Email -->
            <div class="col-span-6 sm:col-span-4">
                <InputLabel for="email" value="Email" />
                <TextInput
                    id="email"
                    v-model="form.email"
                    type="email"
                    class="mt-1 block w-full"
                    required
                    autocomplete="username"
                />
                <InputError :message="form.errors.email" class="mt-2" />

                <div v-if="$page.props.jetstream.hasEmailVerification && user.email_verified_at === null">
                    <p class="text-sm mt-2 dark:text-white">
                        Your email address is unverified.

                        <Link
                            :href="route('verification.send')"
                            method="post"
                            as="button"
                            class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
                            @click.prevent="sendEmailVerification"
                        >
                            Click here to re-send the verification email.
                        </Link>
                    </p>

                    <div v-show="verificationLinkSent"
                         class="mt-2 font-medium text-sm text-green-600 dark:text-green-400">
                        A new verification link has been sent to your email address.
                    </div>
                </div>
            </div>
        </template>

        <template #actions>
            <ActionMessage :on="form.recentlySuccessful" class="me-3">
                Saved.
            </ActionMessage>

            <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                Save
            </PrimaryButton>
        </template>
    </FormSection>
</template>


================================================
FILE: resources/js/Pages/Profile/Show.vue
================================================
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import DeleteUserForm from '@/Pages/Profile/Partials/DeleteUserForm.vue';
import LogoutOtherBrowserSessionsForm from '@/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue';
import SectionBorder from '@/Jetstream/SectionBorder.vue';
import TwoFactorAuthenticationForm from '@/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue';
import UpdatePasswordForm from '@/Pages/Profile/Partials/UpdatePasswordForm.vue';
import UpdateProfileInformationForm from '@/Pages/Profile/Partials/UpdateProfileInformationForm.vue';
import PreferredLanguageForm from "@/Pages/Profile/Partials/PreferredLanguageForm.vue";
import DarkModePreferenceForm from "@/Pages/Profile/Partials/DarkModePreferenceForm.vue";

defineProps({
    confirmsTwoFactorAuthentication: Boolean,
    sessions: Array,
});
</script>

<template>
    <AppLayout title="Profile">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                Profile
            </h2>
        </template>

        <div>
            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
                <div v-if="$page.props.jetstream.canUpdateProfileInformation">
                    <UpdateProfileInformationForm :user="$page.props.auth.user" />

                    <SectionBorder />
                </div>

                <div v-if="$page.props.jetstream.canUpdatePassword">
                    <UpdatePasswordForm class="mt-10 sm:mt-0" />

                    <SectionBorder />
                </div>

                <div>
                    <PreferredLanguageForm class="mt-10 sm:mt-0"  :user="$page.props.auth.user"/>

                    <SectionBorder />
                </div>

                <div>
                    <DarkModePreferenceForm class="mt-10 sm:mt-0"  :user="$page.props.auth.user"/>

                    <SectionBorder />
                </div>

                <div v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
                    <TwoFactorAuthenticationForm
                        :requires-confirmation="confirmsTwoFactorAuthentication"
                        class="mt-10 sm:mt-0"
                    />

                    <SectionBorder />
                </div>

                <LogoutOtherBrowserSessionsForm :sessions="sessions" class="mt-10 sm:mt-0" />

                <template v-if="$page.props.jetstream.hasAccountDeletionFeatures">
                    <SectionBorder />

                    <DeleteUserForm class="mt-10 sm:mt-0" />
                </template>
            </div>
        </div>
    </AppLayout>
</template>


================================================
FILE: resources/js/Pages/Samples/Components/Alert.vue
================================================
<template>
    <Head title="Alerts" />
    <app-layout>
        <template #header>{{ tm('pageTitle') }}</template>
        <template #subHeader>{{ tm('pageSubTitle') }}</template>
        <template #default>
            <grid-section :col="1" :gap="4">
                <template v-for="content in demoContents" :key="content.id">
                    <t-code-showcase
                        :tabs="showcaseTabs"
                        @click.capture="activeShowcase = content.design"
                    >
                        <t-alert
                            :id="content.id"
                            :design="content.design"
                            :color="content.color"
                            :radius="content.radius"
                            :title="content.title ? tm(content.title) : null"
                            :closeable="content.closeable"
                            :timer-status="content.timerStatus"
                            @destroy="revive(demoContents[content.design])"
                        >
                            <template #icon v-if="content.icon || content.media">
                                <icon v-if="content.icon" :icon="content.icon" size="lg" />
                                <t-avatar
                                    v-if="content.media"
                                    :radius="8"
                                    :size="3"
                                    src="https://i.pravatar.cc/300"
                                    class="my-2"
                                />
                            </template>
                            <span v-text="tm(content.content)"></span>
                        </t-alert>
                        <!-- Revive Message -->
                        <div
                            v-if="reviveMessageStatus[content.design]"
                            class="flex justify-center items-center space-x-4 font-semibold text-yellow-600 dark:text-white bg-yellow-300/10 dark:bg-yellow-700/20 border border-yellow-600 rounded p-4 pulse"
                        >
                            <icon icon="info" size="lg" />
                            <span v-text="tm('reviveMessage')"></span>
                        </div>
                        <template #js>{{ docSamples[content.design].js }}</template>
                        <template #template>{{ docSamples[content.design].template }}</template>
                        <template #label="slotProps">
                            <icon v-if="slotProps.tab.id === 'timer'" icon="play" size="sm" />
                            <span v-text="slotProps.tab.label" />
                        </template>
                    </t-code-showcase>
                </template>
            </grid-section>,
        </template>
    </app-layout>
</template>

<script>
/*Main Functions*/
import { defineComponent, ref, reactive } from "vue";
import { Head } from "@inertiajs/vue3";

/*Component*/
import AppLayout from "@/Layouts/AppLayout.vue";
import GridSection from "@/Layouts/GridSection.vue";
import TAlert from "@/Components/Alert/TAlert.vue";
import TAvatar from "@/Components/Avatar/TAvatar.vue";
import TCodeShowcase from '@/Components/Code/TCodeShowcase.vue'

/*Import FontAwesomeIcon*/
import { library } from "@fortawesome/fontawesome-svg-core";
import { faCheckCircle, faTrash, faChevronLeft, faRetweet, faBan, faClock, faInfo, faHistory, faPlay } from "@fortawesome/free-solid-svg-icons";
library.add(faCheckCircle, faTrash, faChevronLeft, faRetweet, faBan, faClock, faInfo, faHistory, faPlay)

/* Multi-language */
import { useI18n } from "vue-i18n";

export default defineComponent({
    name: "Alert",
    components: {
        Head,
        TAvatar,
        AppLayout,
        GridSection,
        TAlert,
        TCodeShowcase,
    },
    setup() {
        /* Multi-language */
        const { t, tm } = useI18n({
            inheritLocale: true,
            messages: {
                en: {
                    pageTitle: 'Alerts',
                    pageSubTitle: 'Closeable and timeable elite alert boxes',
                    filledTitle: 'Success',
                    filledContent: 'The post added successfully (filled)',
                    lightTitle: 'Danger',
                    lightContent: 'The user deleted successfully (light)',
                    inlineContent: 'Your account was blocked, please connect with IT (inline)',
                    outlineContent: 'You entered a new configuration, the settings will refresh 24hr after (outline)',
                    gradientContent: 'The new user is successfully added. \n User: Hamdi KAYA (gradient)',
                    elegantTitle: 'Attention',
                    elegantContent: 'The all of changes overwrite to themself (elegant)',
                    blockContent: 'Please, check your task list (block)',
                    activateTimer: 'Start timer',
                    reviveMessage: 'Don\'t worry, it\'ll come back in 4 seconds',
                    docDefault: 'Default Value',
                    docDescription: 'Description',
                    docType: 'Value Type',
                    docIdDesc: 'It is unique id for your alert. You set it to different value for each alert.',
                    docDesignDesc: 'The theme of the alert component.',
                    docColorDesc: 'The color of the alert component. Important: If you use the gradient design, you can not default color options. If you use the gradient design, your color options are rose, sky, fuchsia, violet, cloud, turquoise, caterpillar, dream and biscuit',
                    docRadiusDesc: 'It shapes the corners of the alert.',
                    docTitleDesc: 'If you would like to display a title using the alert component, pass/set any value through this prop.',
                    docCloseableDesc: 'If you would like to make your alert component closeable, you can use this prop.',
                    docTimerStatusDesc: 'If you would like to make your alert component to close automatically, you can set this prop.',
                    docTimerDesc: 'If you set prop of the timer-status to true, You should set the timer by milliseconds',
                    docTypeDesc: 'If you don not want to deal with design and color, you can use this prop beacause it sets automatically design and color values to your choose.',
                },
                tr: {
                    pageTitle: 'Uyarı Kutusu',
                    pageSubTitle: 'Gizlenebilir ve zamanlanabilir şık uyarı kutuları',
                    filledTitle: 'İşlem Başarılı',
                    filledContent: 'Gönderiniz başarıyla yayınlandı (filled)',
                    lightTitle: 'Dikkat',
                    lightContent: 'Kullanıcı silindi (light)',
                    inlineContent: 'Hesabınız bloke oldu, lütfen IT ile iletişime geçiniz (inline)',
                    outlineContent: 'Yeni girdiğiniz ayarlar 24 saat içinde aktif olacaktır (outline)',
                    gradientContent: 'Yeni kullanıcı eklendi. \n Kullanıcı: Hamdi KAYA (gradient)',
                    elegantTitle: 'Uyarı',
                    elegantContent: 'Yapıtığınız değişiklikler, var olan kayıtların üzerine yazılacak (elegant)',
                    blockContent: 'Lütfen görev listenizi kontrol ediniz (block)',
                    activateTimer: 'Zamanlayıcıyı Çalıştır',
                    reviveMessage: 'Endişelenme 4 saniye sonra geri gelecek',
                    docDefault: 'Varsayılan Değer',
                    docDescription: 'Detay',
                    docType: 'Değer Türü',
                    docIdDesc: 'Her uyarı kutusu için benzersiz olması gereken değer. Her uyarı için benzersiz olacak şekilde ayarlamalısın.',
                    docDesignDesc: 'Uyarı kutusunun genel görünümünü belirler.',
                    docColorDesc: 'Uyarı kutusunun rengini belirlemenize yarar. Eğer gradient tasarımı kullanıyorsanız lütfen default renkler yerine bu renklerden birini kullanınız: rose, sky, fuchsia, violet, cloud, turquoise, caterpillar, dream ve biscuit',
                    docRadiusDesc: 'Uyarı kutusunun köşelerinin ovalliğini kontrol etmenizi sağlar.',
                    docTitleDesc: 'Uyarı kutusu içinde istediğiniz başlığı gösterebilmenizi sağlar.',
                    docCloseableDesc: 'Uyarı kutusuna gizleme düğmesi eklemenizi sağlar.',
                    docTimerStatusDesc: 'Uyarı kutusunun belirlediğiniz zaman sonunda kapanmasını sağlar.',
                    docTimerDesc: 'Otomatik kapanma süresini belirlemenizi sağlar, timer-status probunun true olarak tanımlanmış olması gereklidir.',
                    docTypeDesc: 'Tasarım ve renk ile uğraşmadan direk başarılı(success-yeşil) veya dikkat(danger-kırmızı) hissiyatı yaratacak hazır tasarımları kullanmanızı sağlar. Type değerini verdiğinizde design ve color değeri girmeniz gerekmez. ',
                },
            },
        });

        /* Demo Contents */
        const demoContents = reactive({
            "filled": {
                id: 1,
                design: "filled",
                content: "filledContent",
                color: "success",
                closeable: true,
                radius: 1,
                icon: "check-circle",
                title: "filledTitle",
                timerStatus: false
            },
            "light": {
                id: 1,
                design: "light",
                content: "lightContent",
                color: "danger",
                radius: 3,
                icon: "trash",
                title: "lightTitle",
                closeable: true,
                timerStatus: false
            },
            "inline": {
                id: 1,
                design: "inline",
                content: "inlineContent",
                color: "warning",
                radius: 3,
                icon: "ban",
                timerStatus: false
            },
            "outline": {
                id: 1,
                design: "outline",
                content: "outlineContent",
                color: "info",
                radius: 2,
                icon: "retweet",
                timerStatus: false
            },
            "gradient": {
                id: 1,
                design: "gradient",
                content: "gradientContent",
                color: "dream",
                radius: 3,
                media: true,
                closeable: true,
                timerStatus: false
            },
            "elegant": {
                id: 1,
                design: "elegant",
                content: "elegantContent",
                color: "violet",
                radius: 8,
                title: "elegantTitle",
                closeable: true,
                timerStatus: false
            },
            "block": {
                id: 1,
                design: "block",
                content: "blockContent",
                color: "info",
                radius: 1,
                icon: "info",
                closeable: true,
                timerStatus: false
            }
        });
        const activeShowcase = ref()
        const startTimer = () => {
            demoContents[activeShowcase.value].timerStatus = true
        }
        const reviveMessageStatus = ref({});
        const revive = (alert) => {
            setTimeout(() => {
                reviveMessageStatus.value[alert.design] = true
            }, 1000)

            setTimeout(() => {
                alert.id++
                alert.timer = null
                reviveMessageStatus.value[alert.design] = false
            }, 4000)
        }

        /* Documentation */
        /* Props Definitions */
        const docProps = {
            headers: [
                { id: 'prop', label: 'Prop' },
                { id: 'type', label: tm('docType') },
                { id: 'options', label: 'Options', colorfulBg: true },
                { id: 'default', label: tm('docDefault') },
                { id: 'description', label: tm('docDescription') },

            ],
            content: [
                {
                    id: 'id',
                    prop: 'id',
                    type: 'String, Number, Array, Object and Date',
                    default: 'unique',
                    description: tm('docIdDesc'),
                },
                {
                    id: 'design',
                    prop: 'design',
                    type: 'String',
                    options: ['filled', 'light', 'inline', 'outline', 'gradient', 'elegant', 'block'],
                    default: 'filled',
                    description: tm('docDesignDesc')
                },
                {
                    id: 'color',
                    prop: 'color',
                    type: 'String',
                    options: ['success', 'danger', 'warning', 'info', 'purple', 'light', 'dark'],
                    default: 'light',
                    description: tm('docColorDesc')
                },
                {
                    id: 'radius',
                    prop: 'radius',
                    type: 'Number',
                    options: ['0', '1', '2', '3', '4', '5', '6', '7', '8'],
                    default: '3',
                    description: tm('docRadiusDesc')
                },
                {
                    id: 'title',
                    prop: 'title',
                    type: 'String',
                    description: tm('docTitleDesc')
                },
                {
                    id: 'closeable',
                    prop: 'closeable',
                    type: 'Boolean',
                    options: ['true', 'false'],
                    default: 'false',
                    description: tm('docCloseableDesc')
                },
                {
                    id: 'timer-status',
                    prop: 'timer-status',
                    type: 'Boolean',
                    description: tm('docTimerStatusDesc')
                },
                {
                    id: 'timer',
                    prop: 'timer',
                    type: 'Number',
                    description: tm('docTimerDesc')
                },
                {
                    id: 'type',
                    prop: 'type',
                    type: 'String',
                    options: ['success', 'danger', 'warning', 'info'],
                    description: tm('docTypeDesc')
                },
            ]
        };

        /* Sample Codes */
        const docSamples = {
            filled: {
                js: '/* FontAwesomeIcon Import */\n'+
                    'import { library } from "@fortawesome/fontawesome-svg-core";\n'+
                    'import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";\n'+
                    'library.add( faCheckCircle )\n\n/* Alert Component Import */\n'+
                    'import TAlert from \'@/Components/Alert/TAlert.vue\'\n'+
                    '\n' +
                    'export default {\n'+
                    '    components: { TAlert },\n'+
                    '    setup() {\n'+
                    '    },\n' +
                    '}',
                template: '<t-alert\n' +
                    '    id="success"\n' +
                    '    design="filled"\n' +
                    '    color="success"\n' +
                    '    title="Success"\n' +
                    '    :radius=1\n' +
                    '    :closeable="true"\n' +
                    '    >\n' +
                    '    <template #icon>\n' +
                    '        <icon icon="check-circle" size="lg" />\n' +
                    '    </template>\n' +
                    '    The post added successfully (filled)\n' +
                    '</t-alert>',
            },
            light: {
                js: '/* FontAwesomeIcon Import */\n' +
                    'import { library } from "@fortawesome/fontawesome-svg-core";\n' +
                    'import { faTrash } from "@fortawesome/free-solid-svg-icons";\n' +
                    'library.add( faTrash  )\n' +
                    '\n' +
                    '/* Alert Component Import */\n' +
                    'import TAlert from \'@/Components/Alert/TAlert.vue\'\n' +
                    '\n' +
                    'export default {\n' +
                    '    components: { TAlert },\n' +
                    '    setup() {\n' +
                    '    },\n' +
                    '}',
                template: '<t-alert\n' +
                    '    id="danger"\n' +
                    '    design="light"\n' +
                    '    color="danger"\n' +
                    '    title="Danger"\n' +
                    '    :closeable="true"\n' +
                    '    >\n' +
                    '    <template #icon>\n' +
                    '        <icon icon="trash" size="lg" />\n' +
                    '    </template>\n' +
                    '    The user deleted successfully (light)\n' +
                    '</t-alert>',
            },
            inline: {
                js: '/* FontAwesomeIcon Import */\n' +
                    'import { library } from "@fortawesome/fontawesome-svg-core";\n' +
                    'import { faBan } from "@fortawesome/free-solid-svg-icons";\n' +
                    'library.add( faBan )\n' +
                    '\n' +
                    '/* Alert Component Import */\n' +
                    'import TAlert from \'@/Components/Alert/TAlert.vue\'\n' +
                    '\n' +
                    'export default {\n' +
                    '    components: { TAlert },\n' +
                    '    setup() {\n' +
                    '    },\n' +
                    '}',
                template: '<t-alert\n' +
                    '    id="blocked"\n' +
                    '    design="inline"\n' +
                    '    color="warning"\n' +
                    '    :closeable="false"\n    >\n' +
                    '    <template #icon>\n' +
                    '        <icon icon="ban" size="lg" />\n' +
                    '    </template>\n' +
                    '    The user deleted successfully (light)\n' +
                    '</t-alert>',
            },
            outline: {
                js: '/* FontAwesomeIcon Import */\n' +
                    'import { library } from "@fortawesome/fontawesome-svg-core";\n' +
                    'import { faRetweet } from "@fortawesome/free-solid-svg-icons";\n' +
                    'library.add( faRetweet )\n' +
                    '\n' +
                    '/* Alert Component Import */\n' +
                    'import TAlert from \'@/Components/Alert/TAlert.vue\'\n' +
                    '\n' +
                    'export default {\n' +
                    '    components: { TAlert },\n' +
                    '    setup() {\n' +
                    '    },\n' +
                    '}',
                template: '<t-alert\n' +
                    '    id="updateSettings"\n' +
                    '    design="outline"\n' +
                    '    color="info"\n' +
                    '    :closeable="false"\n' +
                    '    >\n' +
                    '    <template #icon>\n' +
                    '        <icon icon="retweet" size="lg" />\n' +
                    '    </template>\n' +
                    '    You entered a new configuration, the settings will refresh 24hr after (outline)\n' +
                    '</t-alert>',
            },
            gradient: {
                js: '/* Alert Component Import */\n' +
                    'import TAlert from \'@/Components/Alert/TAlert.vue\'\n' +
                    '\n' +
                    '/* Avatar Component Import */\n' +
                    'import TAvatar from "@/Components/Avatar/TAvatar.vue";\n' +
                    '\n' +
                    'export default {\n' +
                    '    components: {\n' +
                    '        TAlert,\n' +
                    '        TAvatar\n' +
                    '    },\n' +
                    '    setup() {\n' +
                    '    },\n' +
                    '}',
                template: '<t-alert\n' +
                    '    id="createSuccess"\n' +
                    '    design="gradient"\n' +
                    '    color="dream"\n' +
                    '    :closeable="true"\n' +
                    '    >\n' +
                    '    <t-avatar\n' +
                    '        :radius="8"\n' +
                    '        :size="3"\n' +
                    '        src="https://i.pravatar.cc/300"\n' +
                    '        />\n' +
                    '    The new user is successfully added.<br>\n' +
                    '    User: Hamdi KAYA (gradient)\n' +
                    '</t-alert>',
            },
            elegant: {
                js: '/* Alert Component Import */\n' +
                    'import TAlert from \'@/Components/Alert/TAlert.vue\'\n' +
                    '\nexport default {\n' +
                    '    components: { TAlert },\n' +
                    '    setup() {\n' +
                    '    },\n' +
                    '}',
                template: '<t-alert\n' +
                    '    id="overwrite"\n' +
                    '    design="elegant"\n' +
                    '    color="violet"\n' +
                    '    title="Attention"\n' +
                    '    :closeable="true"\n' +
                    '    :radius=8\n' +
                    '    >\n' +
                    '    The all of changes overwrite to themself (elegant)\n' +
                    '</t-alert>',
            },
            block: {
                js: '/* FontAwesomeIcon Import */\n' +
                    'import { library } from "@fortawesome/fontawesome-svg-core";\n' +
                    'import { faInfo } from "@fortawesome/free-solid-svg-icons";\nlibrary.add( faInfo )\n' +
                    '\n' +
                    '/* Alert Component Import */\n' +
                    'import TAlert from \'@/Components/Alert/TAlert.vue\'\n' +
                    '\n' +
                    'export default {\n' +
                    '    components: { TAlert },\n' +
                    '    setup() {\n' +
                    '    },\n' +
                    '}',
                template: '<t-alert\n' +
                    '    id="blocked"\n' +
                    '    design="block"\n' +
                    '    color="info"\n' +
                    '    :closeable="true"\n' +
                    '    >\n' +
                    '    <template #icon>\n' +
                    '        <icon icon="info" size="lg" />\n' +
                    '    </template>\n' +
                    '    Please, check your task list (block)\n' +
                    '</t-alert>',
            }
        };
        const showcaseTabs = [
            { id: 'js', label: 'JS', type: 'code', codeLang: 'javascript' },
            { id: 'template', label: 'Template', type: 'code', codeLang: 'html' },
            { id: 'props', label: 'Props', type: 'table', table: docProps },
            {
                id: 'timer', label: tm('activateTimer'), command: () => startTimer()
            }
        ];

        return {
            activeShowcase,
            revive,
            reviveMessageStatus,
            showcaseTabs,
            demoContents,
            docSamples,
            t, tm,
        };
    }
});
</script>

<style scoped>
.pulse {
    animation: pulse 1000ms ease-in-out infinite;
}
@keyframes pulse {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}
</style>


================================================
FILE: resources/js/Pages/Samples/Components/Avatar.vue
================================================
<template>
    <app-layout :title="tm('pageTitle')">
        <template #header>
            {{tm('pageTitle')}}
        </template>
        <template #subHeader>
            {{tm('pageSubTitle')}}
        </template>
        <template #default>
            <grid-section :col-phone="1" :col-desktop="2">

                <!--Simple Avatar-->
                <t-code-showcase
                    :tabs="showcaseTabs"
                >
                    <div class="flex flex-wrap gap-4 bg-slate-400/50 dark:bg-slate-800 rounded p-4">
                        <t-avatar :radius="0" src="https://i.pravatar.cc/300?img=0"/>
                        <t-avatar
                            v-for="i in 8"
                            :key="i"
                            :radius="i"
                            :src="'https://i.pravatar.cc/300?img='+i"
                        />
                    </div>
                     <template #js>{{ docSamples.simple.js }}</template>
                        <template #template>{{ docSamples.simple.template }}</template>
                </t-code-showcase>


                <!--Avatar Group-->
                <t-code-showcase
                    :tabs="showcaseTabs"
                >
                    <div class="flex flex-wrap gap-4 bg-slate-400/50 dark:bg-slate-800 rounded p-4">
                        <t-avatar-group>
                            <t-avatar
                                v-for="i in 8"
                                :key="i"
                                :radius="8"
                                :src="'https://i.pravatar.cc/300?img='+i"
                            />
                        </t-avatar-group>
                    </div>
                     <template #js>{{ docSamples.group.js }}</template>
                        <template #template>{{ docSamples.group.template }}</template>
                </t-code-showcase>

                <!--Different Sizes-->
                <t-code-showcase
                    :tabs="showcaseTabs"
                >
                    <div class="flex flex-wrap place-items-end gap-4 bg-slate-400/50 dark:bg-slate-800 rounded p-4">
                        <t-avatar
                            v-for="i in 8"
                            :key="i"
                            :radius="3"
                            :size="9-i"
                            :src="'https://i.pravatar.cc/300?img='+i"
                        />
                    </div>
                     <template #js>{{ docSamples.size.js }}</template>
                        <template #template>{{ docSamples.size.template }}</template>
                </t-code-showcase>


                <!--Avatar Indicators-->
                <t-code-showcase
                    :tabs="showcaseTabs"
                >
                    <div class="flex flex-wrap place-items-end gap-4 bg-slate-400/50 dark:bg-slate-800 rounded p-4">

                        <t-avatar
                            :indicator="{
                            color: 'pink',
                            label: 2,
                            position: 'rb'
                        }"
                            :radius="8"
                            :size="8"
                            src="https://i.pravatar.cc/300?img=8"
                        />

                        <t-avatar
                            :indicator="{
                            color: 'light',
                            label: 12,
                            position: 'lb'
                        }"
                            :radius="7"
                            :size="7"
                            src="https://i.pravatar.cc/300?img=5"
                        />

                        <t-avatar
                            :indicator="{
                            color: 'danger',
                            label: 85,
                            position: 'rt'
                        }"
                            :radius="6"
                            :size="6"
                            src="https://i.pravatar.cc/300?img=4"
                        />

                        <t-avatar
                            :indicator="{
                            color: 'purple',
                            label: 7,
                            position: 'rt'
                        }"
                            :radius="5"
                            :size="5"
                            src="https://i.pravatar.cc/300?img=3"
                        />

                        <t-avatar
                            :indicator="{
                            color: 'warning',
                            label: 14,
                            position: 'lb'
                        }"
                            :radius="4"
                            :size="4"
                            src="https://i.pravatar.cc/300?img=2"
                        />
                        <t-avatar
                            :indicator="{
                            color: 'success',
                            position: 'rb'
                        }"
                            :radius="3"
                            :size="3"
                            src="https://i.pravatar.cc/300?img=1"
                        />
                        <t-avatar
                            :indicator="{
                            color: 'info',
                            label: 2,
                            position: 'lt'
                        }"
                            :radius="2"
                            :size="2"
                            src="https://i.pravatar.cc/300?img=0"
                        />
                        <t-avatar
                            :indicator="{
                                color: 'danger',
                                label: 2,
                                position: 'lb'
                            }"
                            :radius="1"
                            :size="1"
                        />

                    </div>
                     <template #js>{{ docSamples.indicator.js }}</template>
                        <template #template>{{ docSamples.indicator.template }}</template>
                </t-code-showcase>
            </grid-section>
        </template>
    </app-layout>
</template>

<script>
/*Main Functions*/
import {defineComponent} from "vue";

/*Component*/
import AppLayout from "@/Layouts/AppLayout.vue";
import GridSection from "@/Layouts/GridSection.vue";
import TAvatar from "@/Components/Avatar/TAvatar.vue";
import TAvatarGroup from "@/Components/Avatar/TAvatarGroup.vue";
import TCodeShowcase from "@/Components/Code/TCodeShowcase.vue";
import {useI18n} from "vue-i18n/dist/vue-i18n.esm-bundler";

export default defineComponent({
    name: "Avatar",
    components: {
        AppLayout,
        GridSection,
        TAvatar,
        TAvatarGroup,
        TCodeShowcase
    },
    setup(){
        /* Multi-language */
        const { tm } = useI18n({
            inheritLocale: true,
            messages: {
                en: {
                    pageTitle: 'Avatar',
                    pageSubTitle: 'User avatars and team members avatar group',
                    docDefault: 'Default Value',
                    docDescription: 'Description',
                    docType: 'Value Type',
                    docOptions: 'Options',
                    docSrcDesc: 'The path of the photo.',
                    docSizeDesc: 'The size of the photo.',
                    docRadiusDesc: 'It shapes the corners of the avatar.',
                    docIndicatorDesc: 'It works to show a indicator point near the avatar. You should define the values of the options in this object. Sample: :indicator="{ color: \'success\', label: 2, position: \'lb\' }" ',
                    docLinkDesc: 'When the user clicks on the avatar, it directs them to the link you want." ',
                },
                tr: {
                    pageTitle: 'Profil Resmi',
                    pageSubTitle: 'Profil resmi ve ekip üyeleri resimlerinin gösterimi',
                    docDefault: 'Varsayılan Değer',
                    docDescription: 'Detay',
                    docType: 'Değer Türü',
                    docOptions: 'Alabileceği Değerler',
                    docSrcDesc: 'Profil fotoğrafının adresi.',
                    docSizeDesc: 'Profil fotoğrafının büyüklüğü.',
                    docRadiusDesc: 'Profil resminin köşelerinin ovalliğini kontrol etmenizi sağlar.',
                    docIndicatorDesc: 'Profil resminin kenarında bildirim simgesi göstermenizi sağlar. Alabileceği değerler listesindeki değerleri bu obje içinde tanımlamanız gereklidir. Örnek: :indicator="{ color: \'success\', label: 2, position: \'lb\' }"',
                    docLinkDesc: 'Kullanıcının profil resmini tıkladığında istediğin linke yönlenmesini sağlar."',
                },
            },
        });

        /* Documentation */
        /* Props Definitions */
        const docProps = {
            headers: [
                { id: 'prop', label: 'Prop' },
                { id: 'type', label: tm('docType') },
                { id: 'options', label: tm('docOptions'), colorfulBg: true },
                { id: 'default', label: tm('docDefault') },
                { id: 'description', label: tm('docDescription') },

            ],
            content: [
                {
                    id: 'src',
                    prop: 'src',
                    type: 'String',
                    description: tm('docSrcDesc')
                },
                {
                    id: 'size',
                    prop: 'size',
                    type: 'Number',
                    options: ['1', '2', '3', '4', '5', '6', '7', '8'],
                    default: '3',
                    description: tm('docSizeDesc')
                },
                {
                    id: 'radius',
                    prop: 'radius',
                    type: 'Number',
                    options: ['0', '1', '2', '3', '4', '5', '6', '7', '8'],
                    default: '3',
                    description: tm('docRadiusDesc')
                },
                {
                    id: 'indicator',
                    prop: 'indicator',
                    type: 'Object',
                    options: ['color (success, danger, info, warning, purple, light)', 'label (String)', 'position (lb, rb, lt, rt)'],
                    description: tm('docIndicatorDesc')
                },
                {
                    id: 'link',
                    prop: 'link',
                    type: 'String',
                    description: tm('docLinkDesc')
                },
            ]
        };

        /* Sample Codes */
        const docSamples = {
            simple: {
                js: 'import TAvatar from \'@/Components/Alert/TAvatar.vue\'\n'+
                    '\n' +
                    'export default {\n'+
                    '    components: { TAvatar },\n'+
                    '    setup() {\n'+
                    '    },\n' +
                    '}',
                template: '<t-avatar\n' +
                    '    :radius="3"\n' +
                    '    src="https://i.pravatar.cc/300?img=0"\n' +
                    '    >\n' +
                    '</t-avatar>',
            },
            group: {
                js: 'import TAvatar from \'@/Components/Alert/TAvatar.vue\'\n' +
                    'import TAvatarGroup from \'@/Components/Alert/TAvatarGroup.vue\'\n'+
                    '\n' +
                    'export default {\n'+
                    '    components: { TAvatar, TAvatarGroup },\n'+
                    '    setup() {\n'+
                    '    },\n' +
                    '}',
                template: '<t-avatar-group>\n\n' +
                    '    <t-avatar\n' +
                    '        :radius="8"\n' +
                    '        src="https://i.pravatar.cc/300?img=0"\n' +
                    '        link="https://test.com"\n' +
                    '        >\n' +
                    '    </t-avatar>\n\n' +
                    '    <t-avatar\n' +
                    '        :radius="8"\n' +
                    '        src="https://i.pravatar.cc/300?img=2"\n' +
                    '        :link="route(\'profile\')"\n' +
                    '        >\n' +
                    '    </t-avatar>\n\n' +
                    '</t-avatar-group>',
            },
            size: {
                js: 'import TAvatar from \'@/Components/Alert/TAvatar.vue\'\n'+
                    '\n' +
                    'export default {\n'+
                    '    components: { TAvatar },\n'+
                    '    setup() {\n'+
                    '    },\n' +
                    '}',
                template: '<t-avatar\n' +
                    '    :size="5"\n' +
                    '    src="https://i.pravatar.cc/300?img=0"\n' +
                    '    >\n' +
                    '</t-avatar>',
            },
            indicator: {
                js: 'import TAvatar from \'@/Components/Alert/TAvatar.vue\'\n'+
                    '\n' +
                    'export default {\n'+
                    '    components: { TAvatar },\n'+
                    '    setup() {\n'+
                    '    },\n' +
                    '}',
                template: '<t-avatar\n' +
                    '    :radius="3"\n' +
                    '    src="https://i.pravatar.cc/300?img=0"\n' +
                    '    :indicator="{\n' +
                    '            color: \'success\',\n' +
                    '            label: 7,\n' +
                    '            position: \'rt\'\n' +
                    '        }"\n' +
                    '    >\n' +
                    '</t-avatar>',
            }
        };
        const showcaseTabs = [
            { id: 'js', label: 'JS', type: 'code', codeLang: 'javascript' },
            { id: 'template', label: 'Template', type: 'code', codeLang: 'html' },
            { id: 'props', label: 'Props', type: 'table', table: docProps },
        ];

        return {tm, docSamples, docProps,showcaseTabs}
    }
});
</script>


================================================
FILE: resources/js/Pages/Samples/Components/BackEndTable.vue
================================================
<template>
    <app-layout title="Backend Table">
        <!--Header-->
        <template #header>
            {{tm('pageTitle')}}
        </template>
        <!--Subheader-->
        <template #subHeader>
            {{tm('pageSubTitle')}}
        </template>
        <!--Content-->
        <template #default>
            <t-code-showcase
                :tabs="showcaseTabs"
            >
                <t-back-end-table
                    :content="demoContent"
                    :header="header"
                    content-key="demoContent"
                    search-route="back-end-table"
                    request-search-key="demoSearch"
                >
                    <template #top-right>
                        <t-button color="green" design="light" border>+ Add New</t-button>
                    </template>
                    <template #type="{props}">
                        {{ filterType.find(t => t.key === Number(props.type)).label }}
                    </template>
                    <template #status="{props}">
                        <t-badge :color="filterStatus.find(t=>t.key === props.status).color">
                            {{ filterStatus.find(t => t.key === props.status).label }}
                        </t-badge>
                    </template>
                </t-back-end-table>
                <template #controller>{{ docSamples.controller }}</template>
                <template #route>{{ docSamples.route }}</template>
                <template #js>{{ docSamples.js }}</template>
                <template #template>{{ docSamples.template }}</template>
            </t-code-showcase>
        </template>
    </app-layout>
</template>

<script>
/*Main Functions*/
import {reactive, defineComponent, computed, ref} from "vue";

/*Components*/
import AppLayout from "@/Layouts/AppLayout.vue";
import TBackEndTable from "@/Components/Table/TBackEndTable.vue";
import TBadge from "@/Components/Badge/TBadge.vue";
import TButton from "@/Components/Button/TButton.vue";
import TCodeShowcase from "@/Components/Code/TCodeShowcase.vue";
import {useI18n} from "vue-i18n";

export default defineComponent({
    name: "Table",
    components: {
        TButton,
        TBadge,
        TBackEndTable,
        AppLayout,
        TCodeShowcase
    },
    props: {
        demoContent: {
            type: Object,
            default() {
                return {};
            }
        },
        searchDataMainProducts: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    setup(props) {
        const filterStatus = reactive([
            {key: 1, label: "Active", color: "green"},
            {key: 0, label: "Passive", color: "red"}
        ]);
        const filterType = reactive([
            {key: 0, label: "Printer"},
            {key: 1, label: "Pencil"},
            {key: 2, label: "Clipper"}
        ]);
        const compareOperators = reactive([
            {key: "contains", label: "contains"},
            {key: "notContains", label: "not contains"},
            {key: "starts", label: "starts"},
            {key: "ends", label: "ends"}
        ]);
        const priceCompareOperators = reactive([
            {key: "=", label: "="},
            {key: ">", label: ">"},
            {key: ">=", label: ">="},
            {key: "<", label: "<"},
            {key: "<=", label: "<="}
        ]);

        const selectData = reactive([
            {
                label: "Dark Mode",
                key: "darkMode",
                options: [
                    {key: true, label: "Dark Mode"},
                    {key: false, label: "Light Mode"}
                ]
            },
            {
                label: "Design",
                key: "design",
                options: [
                    {key: "elegant", label: "Elegant"}
                ]
            },
            {
                label: "Radius",
                key: "radius",
                options: [
                    {key: 0, label: "Without radius"},
                    {key: 3, label: "Small"},
                    {key: 5, label: "Large"}
                ]
            }
        ]);
        const selectedData = reactive({
            darkMode: false,
            design: "elegant",
            radius: 3
        });
        const header = reactive([
            {
                label: "Name",
                key: "name",
                align: "left",
                status: true,
                sortable: true,
                simpleSearchable: true,
                advancedSearchable: true,
                advancedSearchInputType: "text",
                compareOperators: compareOperators
            },
            {
                label: "Main Product",
                key: "main_product_name",
                align: "left",
                status: true,
                simpleSearchable: false,
                advancedSearchable: true,
                advancedSearchKey: 'main_product_id',
                advancedSearchSelectInputSource: props.searchDataMainProducts,
                advancedSearchSelectLabelKey: 'name',
                advancedSearchSelectValueKey: 'id',
                advancedSearchInputType: "select",
                advancedSearchSelectSearch: true
            },
            {
                label: "Type",
                key: "type",
                align: "left",
                status: true,
                simpleSearchable: false,
                advancedSearchable: true,
                advancedSearchSelectInputSource: filterType,
                advancedSearchInputType: "select"
            },
            {
                label: "Price",
                key: "price",
                align: "center",
                status: true,
                sortable: true,
                simpleSearchable: true,
                advancedSearchable: false,
                advancedSearchInputType: "between",
            },
            {
                label: "Status",
                key: "status",
                align: "center",
                status: true,
                sortable: true,
                simpleSearchable: false,
                advancedSearchable: true,
                advancedSearchSelectInputSource: filterStatus,
                advancedSearchInputType: "select",
                compareOperators: compareOperators
            }
        ]);
        const features = computed(() => {
            return {
                table: {
                    darkMode: selectedData.darkMode,
                    design: selectedData.design,
                    borderRow: true,
                    zebraRow: false,
                    hoverRow: true,
                    radius: selectedData.radius,
                    contentKey: 'demoContent',
                    searchRoute: 'back-end-table'
                },
                pagination: {
                    status: true,
                    darkMode: selectedData.darkMode,
                    radius: selectedData.radius,
                    range: 5,
                    jump: true,
                },
                actions: {
                    status: true,
                    headerText: "Aksiyonlar"
                },
                deleteModal: {
                    headerText: "Item's deleting",
                    contentText: "You are going to delete <br><b>{$name}</b><br>Are you sure ?",
                    icon: "warning"
                }
            };
        });

        /* Multi-language */
        const {t, tm} = useI18n({
            inheritLocale: true,
            messages: {
                en: {
                    pageTitle: 'Table with backend data',
                    pageSubTitle: 'Tables with Backend Data and Dynamic options',
                    docDefault: 'Default Value',
                    docDescription: 'Description',
                    docType: 'Value Type',
                    docContentDesc: '',
                    docHeaderDesc: '',
                    docRequestSearchKeyDesc: '',
                    docPerPageDesc: '',
                    docUniqueIdDesc: '',
                    docRadiusDesc: 'It shapes the corners of the table.',
                    docHeaderKeyDesc: '',
                    docHeaderLabelDesc: '',
                    docHeaderAlignDesc: '',
                    docHeaderStatusDesc: '',
                    docHeaderSortableDesc: '',
                    docHeaderSimpleSearchableDesc: '',
                    docHeaderAdvancedSearchableDesc: '',
                    docHeaderAdvancedSearchKeyDesc: '',
                    docHeaderAdvancedSearchInputTypeDesc: '',
                    docHeaderAdvancedSearchInputSourceDesc: '',
                    docHeaderAdvancedSearchLabelDesc: '',
                    docHeaderAdvancedSearchValueDesc: '',
                    docHeaderCompareOperatorsDesc: ''

                },
                tr: {
                    pageTitle: 'Tablo (Server Side)',
                    pageSubTitle: 'Sunucu Tarafında Çalışan Tablo Komponenti',
                    docDefault: 'Varsayılan Değer',
                    docDescription: 'Detay',
                    docType: 'Değer Türü',
                    docContentDesc: '',
                    docHeaderDesc: '',
                    docRequestSearchKeyDesc: '',
                    docPerPageDesc: '',
                    docUniqueIdDesc: '',
                    docRadiusDesc: 'Tablonun köşelerinin ovalliğini kontrol etmenizi sağlar.',
                    docHeaderKeyDesc: '',
                    docHeaderLabelDesc: '',
                    docHeaderAlignDesc: '',
                    docHeaderStatusDesc: '',
                    docHeaderSortableDesc: '',
                    docHeaderSimpleSearchableDesc: '',
                    docHeaderAdvancedSearchableDesc: '',
                    docHeaderAdvancedSearchKeyDesc: '',
                    docHeaderAdvancedSearchInputTypeDesc: '',
                    docHeaderAdvancedSearchInputSourceDesc: '',
                    docHeaderAdvancedSearchLabelDesc: '',
                    docHeaderAdvancedSearchValueDesc: '',
                    docHeaderCompareOperatorsDesc: ''
                },
            },
        });

        /* Documentation */
        /* Props Definitions */

        const docProps = {
            headers: [
                {id: 'prop', label: 'Prop'},
                {id: 'type', label: tm('docType')},
                {id: 'options', label: 'Options', colorfulBg: true},
                {id: 'default', label: tm('docDefault')},
                {id: 'description', label: tm('docDescription')},

            ],
            content: [
                {
                    id: 'content',
                    prop: 'content',
                    type: 'Object',
                    description: tm('docContentDesc'),
                },
                {
                    id: 'header',
                    prop: 'header',
                    type: 'Array',
                    description: tm('docHeaderDesc')
                },
                {
                    id: 'request-search-key',
                    prop: 'request-search-key',
                    type: 'String',
                    default: 'searchObj',
                    description: tm('docRequestSearchKeyDesc')
                },
                {
                    id: 'per-page',
                    prop: 'per-page',
                    type: 'Number',
                    default: '5',
                    description: tm('docPerPageDesc')
                },
                {
                    id: 'unique-id',
                    prop: 'unique-id',
                    type: 'String',
                    default: 'id',
                    description: tm('docUniqueIdDesc')
                },
                {
                    id: 'row-border',
                    prop: 'row-border',
                    type: 'Boolean',
                    default: 'true',
                },
                {
                    id: 'row-zebra',
                    prop: 'row-zebra',
                    type: 'Boolean',
                    default: 'true',
                },
                {
                    id: 'row-hover',
                    prop: 'row-hover',
                    type: 'Boolean',
                    default: 'true',
                },
                {
                    id: 'radius',
                    prop: 'radius',
                    type: 'Number',
                    default: '3',
                    options: ['0', '1', '2', '3', '4', '5', '6', '7', '8'],
                    description: tm('docRadiusDesc')
                },
                {
                    id: 'show-pagination',
                    prop: 'show-pagination',
                    type: 'Boolean',
                    default: 'true',
                },
                {
                    id: 'pagination-detail',
                    prop: 'pagination-detail',
                    type: 'Boolean',
                    default: 'false',
                },
                {
                    id: 'pagination-detail-text',
                    prop: 'pagination-detail-text',
                    type: 'String',
                    default: '{totalPage} pages - {totalRecord} records',
                },
                {
                    id: 'pagination-range',
                    prop: 'pagination-range',
                    type: 'Number',
                    default: '5',
                },
                {
                    id: 'pagination-jump',
                    prop: 'pagination-jump',
                    type: 'Boolean',
                    default: 'true',
                },
                {
                    id: 'pagination-show-arrow-text',
                    prop: 'pagination-show-arrow-text',
                    type: 'Boolean',
                    default: 'true',
                },
                {
                    id: 'pagination-show-previous-text',
                    prop: 'pagination-show-previous-text',
                    type: 'String',
                    default: 'previous',
                },
                {
                    id: 'pagination-show-next-text',
                    prop: 'pagination-show-next-text',
                    type: 'String',
                    default: 'next',
                },
                {
                    id: 'actions',
                    prop: 'actions',
                    type: 'Array',
                    default: '[\'view\']',
                    options: ['view', 'delete', 'edit']
                },
                {
                    id: 'actions-modal',
                    prop: 'actions-modal',
                    type: 'Array',
                    default: '[\'delete\']',
                    options: ['view', 'delete', 'edit']
                },
                {
                    id: 'actions-header-text',
                    prop: 'actions-header-text',
                    type: 'String',
                    default: 'actions',
                },
                {
                    id: 'header[x].key',
                    prop: 'header[x].key',
                    type: 'String',
                    description: tm('docHeaderKeyDesc')
                },
                {
                    id: 'header[x].label',
                    prop: 'header[x].label',
                    type: 'String',
                    description: tm('docHeaderLabelDesc')
                },
                {
                    id: 'header[x].align',
                    prop: 'header[x].align',
                    type: 'String',
                    options: ['left', 'center', 'right'],
                    description: tm('docHeaderAlignDesc')
                },
                {
                    id: 'header[x].status',
                    prop: 'header[x].status',
                    type: 'Boolean',
                    options: ['true', 'false'],
                    default: 'true',
                    description: tm('docHeaderStatusDesc')
                },
                {
                    id: 'header[x].sortable',
                    prop: 'header[x].sortable',
                    type: 'Boolean',
                    options: ['true', 'false'],
                    default: 'false',
                    description: tm('docHeaderSortableDesc')
                },
                {
                    id: 'header[x].simpleSearchable',
                    prop: 'header[x].simpleSearchable',
                    type: 'Boolean',
                    options: ['true', 'false'],
                    default: 'false',
                    description: tm('docHeaderSimpleSearchableDesc')
                },
                {
                    id: 'header[x].advancedSearchable',
                    prop: 'header[x].advancedSearchable',
                    type: 'Boolean',
                    options: ['true', 'false'],
                    default: 'false',
                    description: tm('docHeaderAdvancedSearchableDesc')
                },
                {
                    id: 'header[x].advancedSearchKey',
                    prop: 'header[x].advancedSearchKey',
                    type: 'String',
                    description: tm('docHeaderAdvancedSearchKeyDesc')
                },
                {
                    id: 'header[x].advancedSearchInputType',
                    prop: 'header[x].advancedSearchInputType',
                    type: 'String',
                    options: ['text', 'select', 'between'],
                    description: tm('docHeaderAdvancedSearchInputTypeDesc')
                },
                {
                    id: 'header[x].advancedSearchSelectInputSource',
                    prop: 'header[x].advancedSearchSelectInputSource',
                    type: 'Object',
                    description: tm('docHeaderAdvancedSearchInputSourceDesc')
                },
                {
                    id: 'header[x].advancedSearchSelectLabelKey',
                    prop: 'header[x].advancedSearchSelectLabelKey',
                    type: 'String',
                    description: tm('docHeaderAdvancedSearchLabelDesc')
                },
                {
                    id: 'header[x].advancedSearchSelectValueKey',
                    prop: 'header[x].advancedSearchSelectValueKey',
                    type: 'String',
                    description: tm('docHeaderAdvancedSearchValueDesc')
                },
                {
                    id: 'header[x].compareOperators',
                    prop: 'header[x].compareOperators',
                    type: 'Array',
                    description: tm('docHeaderCompareOperatorsDesc')
                },
            ]
        };
        /* Sample Codes */
        const docSamples = {
            controller: '<?php\n\n' +
                'namespace App\\Http\\Controllers;\n' +
                '\n' +
                'use App\\Models\\Product;\n' +
                'use Illuminate\\Http\\Request;\n' +
                'use Inertia\\Inertia;\n' +
                '\n' +
                'class ProductController extends Controller\n' +
                '{\n' +
                '    /**\n' +
                '    * Display a listing of the resource.\n' +
                '    *\n' +
                '    * @return \\Inertia\\Response\n' +
                '    */\n' +
                '    public function index(Request $request)\n' +
                '    {\n\n' +
                '        //Please define vue file directory accordance your file structure\n' +
                '        return Inertia::render(\'Module/Product/Index\', [\n' +
                '            //You should to use tableSearch macro for dynamic query builder with $request->searchObj\n' +
                '            \'products\' => Product::tableSearch($request->input(\'searchObj\')),\n' +
                '            //You can send only related data for search data. For example the managers list only related to the departments\n' +
                '            // main_product_id = column name, products = table name\n' +
                '            \'searchDataMainProducts\' => Product::getRelatedData(\'main_product_id\', \'products\')->get()\n' +
                '        ]);\n' +
                '    }',
            route: '//You can have routes like below (get or resource)' +
                'Route::get(\'product\', [Product::class, \'index\'])->name(\'product.index\')\n' +
                '// or \n' +
                'Route::resource(\'product\', Product::class)\n' +
                '// You should add post route for search requests after get index or resource route\n' +
                'Route::post(\'product\', [Product::class, \'index\'])->name(\'product.search\')//\n',
            js: 'import TBackEndTable from \'@/Components/Table/TBackEndTable.vue\'\n\n' +
                'export default {\n\n' +
                '   components: { TBackEndTable },\n\n' +
                '   props: {\n' +
                '       productData: {\n' +
                '           type: Object,\n' +
                '           default() {\n' +
                '               return {};\n' +
                '           }\n' +
                '        },\n' +
                '        searchDataMainProducts: {\n' +
                '           type: Array,\n' +
                '           default() {\n' +
                '               return [];\n' +
                '           }\n' +
                '        }\n' +
                '    },\n\n' +
                '    setup(\n\n' +
                '       // You can use custom data set for advanced search options list.\n' +
                '       // It linked to status column in this case\n' +
                '       const filterStatus = reactive([\n' +
                '            {key: 1, label: "Active", color: "green"},\n' +
                '            {key: 0, label: "Passive", color: "red"}\n' +
                '        ]);\n' +
                '       //Compare definitions for fields, You can use them what if you want\n' +
                '       const compareOperators = reactive([\n' +
                '            {key: "contains", label: "contains"},\n' +
                '            {key: "notContains", label: "not contains"},\n' +
                '            {key: "starts", label: "starts"},\n' +
                '            {key: "ends", label: "ends"}\n' +
                '            {key: "=", label: "="},\n' +
                '            {key: ">", label: ">"},\n' +
                '            {key: ">=", label: ">="},\n' +
                '            {key: "<", label: "<"},\n' +
                '            {key: "<=", label: "<="}\n' +
                '        ]);\n\n' +
                '       const productDataHeaders = reactive([\n' +
                '            {\n' +
                '                label: "Name",\n' +
                '                key: "name",\n' +
                '                align: "left",\n' +
                '                status: true,\n' +
                '                sortable: true,\n' +
                '                simpleSearchable: true,\n' +
                '                advancedSearchable: true,\n' +
                '                advancedSearchInputType: "text",\n' +
                '                compareOperators: compareOperators\n' +
                '            },\n' +
                '            {\n' +
                '                label: "Main Product",\n' +
                '                key: "main_product_name",\n' +
                '                align: "left",\n' +
                '                status: true,\n' +
                '                simpleSearchable: true,\n' +
                '                advancedSearchable: true,\n' +
                '                advancedSearchKey: \'main_product_id\', //Search in different column\n' +
                '                advancedSearchSelectInputSource: props.searchDataMainProducts, //Select options data source\n' +
                '                advancedSearchSelectLabelKey: \'name\', //Showing label in the select input\n' +
                '                advancedSearchSelectValueKey: \'id\', //Select input real value when it selected\n' +
                '                advancedSearchInputType: "select",\n' +
                '                advancedSearchSelectSearch: true\n' +
                '            },\n' +
                '            {\n' +
                '                label: "Status",\n' +
                '                key: "status",\n' +
                '                align: "center",\n' +
                '                status: true,\n' +
                '                sortable: true,\n' +
                '                simpleSearchable: true,\n' +
                '                advancedSearchable: true,\n' +
                '                advancedSearchSelectInputSource: filterStatus,\n' +
                '                advancedSearchInputType: "select",\n' +
                '            }\n' +
                '        ]);\n' +
                '   )\n' +
                '}',
            template: '<t-back-end-table\n' +
                '    :content="productData"\n' +
                '    :header="productDataHeaders"\n' +
                '    content-key="productData"\n' +
                '    search-route="product.search" \n' +
                '>\n\n' +
                '    // You can add rich elements from this area to top right area of the table\n' +
                '    <template #top-right>\n' +
                '        <t-button color="green" design="light" border>+ Add New</t-button>\n' +
                '    </template>\n\n' +
                '    // If you want to add rich features to data showing, \n' +
                '    you can use scopeSlot. #status is your column key. This is only exaple:\n' +
                '    <template #status="{props}">\n' +
                '        <t-badge :color="filterStatus.find(t=>t.key === props.status).color">\n' +
                '            {{ filterStatus.find(t => t.key === props.status).label }}\n' +
                '        </t-badge>\n' +
                '    </template>\n\n' +
                '</t-back-end-table>',
        };
        const showcaseTabs = [
            {id: 'controller', label: 'Controller', type: 'code', codeLang: 'php'},
            {id: 'js', label: 'JS', type: 'code', codeLang: 'javascript'},
            {id: 'template', label: 'Template', type: 'code', codeLang: 'html'},
            {id: 'route', label: 'Web.php', type: 'code', codeLang: 'php'},
            {id: 'props', label: 'Props', type: 'table', table: docProps},
        ];

        return {
            selectData,
            selectedData,
            header,
            features,
            filterType,
            filterStatus,
            docProps,
            docSamples,
            showcaseTabs,
            t,
            tm
        };
    }
});
</script>


================================================
FILE: resources/js/Pages/Samples/Components/Badge.vue
================================================
<template>
    <app-layout title="Badges">
        <template #header>
            Badges
        </template>
        <template #subHeader>
            Useful badges like price indicator,tags and etc
        </template>
        <template #default>
            <grid-section :col="1">
                <!--General Samples-->
                <t-content-card :width="1">
                    <template #title>Custom Badges</template>
                    <template #subTitle>Color, radius, icon and value options</template>
                    <template #content>
                        <grid-section :col-laptop="2" class="dark:text-gray-100">
                            <!--Filled-->
                            <div class="flex flex-wrap justify-center md:justify-start items-center">
                                <h2 class="font-semibold mr-4">Filled</h2>
                                <div
                                    class="flex flex-wrap justify-center md:justify-start items-center border rounded w-full p-2 space-x-2 space-y-2 dark:border-gray-700">
                                    <t-badge design="filled" color="danger" :radius="0" class="mt-2">REJECTED</t-badge>
                                    <t-badge design="filled" color="success">ACTIVE</t-badge>
                                    <t-badge design="filled" color="light" badge-value="2.825,90 TRY">SALARY</t-badge>
                                    <t-badge design="filled" color="warning" badge-value="8" :radius="8">
                                        <template #icon>
                                            <icon icon="shield-alt" size="sm"/>
                                        </template>
                                        Attacks
                                    </t-badge>
                                </div>
                            </div>

                            <!--Light-->
                            <div class="flex flex-wrap justify-center md:justify-start items-center">
                                <h2 class="font-semibold mr-4">Light</h2>
                                <div
                                    class="flex flex-wrap justify-center md:justify-start items-center border rounded w-full p-2 space-x-2 space-y-2 dark:border-gray-700">
                                    <t-badge design="light" color="info" :radius="0" class="mt-2">pending</t-badge>
                                    <t-badge design="light" color="violet" badge-value="12">open tasks</t-badge>
                                    <t-badge design="light" color="pink" badge-value="125" :radius="8">
                                        <template #icon>
                                            <icon icon="user-circle"/>
                                        </template>
                                        Staff
                                    </t-badge>
                                </div>
                            </div>

                            <!--Inline-->
                            <div class="flex flex-wrap justify-center md:justify-start items-center">
                                <h2 class="font-semibold mr-4">Inline</h2>
                                <div
                                    class="flex flex-wrap justify-center md:justify-start items-center border rounded w-full p-2 space-x-2 space-y-2 dark:border-gray-700">
                                    <t-badge design="inline" color="green" :radius="0" class="mt-2">#tailwindcss
                                    </t-badge>
                                    <t-badge design="inline" color="pink" badge-value="1 Hr. 25 Min." :radius="2">
                                        London
                                    </t-badge>
                                    <t-badge design="inline" color="warning" badge-value="2" :radius="2">
                                        <template #icon>
                                            <icon icon="star" size="sm"/>
                                        </template>
                                        Awards
                                    </t-badge>
                                </div>
                            </div>

                            <!--Outline-->
                            <div class="flex flex-wrap justify-center md:justify-start items-center">
                                <h2 class="font-semibold mr-4">Outline</h2>
                                <div
                                    class="flex flex-wrap justify-center md:justify-start items-center border rounded w-full p-2 space-x-2 space-y-2 dark:border-gray-700">
                                    <t-badge design="outline" color="success" :radius="0" class="mt-2">Online</t-badge>
                                    <t-badge design="outline" color="danger">Offline</t-badge>
                                    <t-badge design="outline" color="warning" badge-value="12 minutes">Away</t-badge>
                                    <t-badge design="outline" color="success" badge-value="+%2">BTC</t-badge>
                                    <t-badge design="outline" color="danger" badge-value="-%1,8">ADA</t-badge>
                                </div>
                            </div>

                            <!--Elegant-->
                            <div class="flex flex-wrap justify-center md:justify-start items-center">
                                <h2 class="font-semibold mr-4">Elegant</h2>
                                <div
                                    class="flex flex-wrap justify-center md:justify-start items-center border rounded w-full p-2 space-x-2 space-y-2 dark:border-gray-700">
                                    <t-badge design="elegant" color="success" :radius="0" class="mt-2">Manager</t-badge>
                                    <t-badge design="elegant" color="violet" badge-value="12">Engineer</t-badge>
                                    <t-badge design="elegant" color="warning" badge-value="8" :radius="6">
                                        <template #icon>
                                            <icon icon="cog" size="sm"/>
                                        </template>
                                        Maintainer
                                    </t-badge>
                                </div>
                            </div>

                            <!--Block-->
                            <div class="flex flex-wrap justify-center md:justify-start items-center">
                                <h2 class="font-semibold mr-4">Block</h2>
                                <div
                                    class="flex flex-wrap justify-center md:justify-start items-center border rounded w-full p-2 space-x-2 space-y-2 dark:border-gray-700">
                                    <t-badge design="block" color="success" :radius="0" class="mt-2">PASSED</t-badge>
                                    <t-badge design="block" color="light" badge-value="-3K TRY">Prompt Cash</t-badge>
                                    <t-badge design="block" color="danger" badge-value="8" :radius="8">
                                        <template #icon>
                                            <icon icon="trash" size="sm"/>
                                        </template>
                                        Trash
                                    </t-badge>
                                </div>
                            </div>
                        </grid-section>
                    </template>
                </t-content-card>
                <!--Selectable Badges-->
                <t-content-card :width="1">
                    <template #title>
                        Selectable Badges
                    </template>
                    <template #subTitle>
                        It works like tag
                    </template>
                    <template #content>
                        <grid-section :col-tablet="2">
                            <div class="flex flex-col border border-dashed p-2">
                                <h3 class="font-semibold dark:text-gray-100">Tags:</h3>
                                <div class="flex flex-wrap space-x-2 justify-start items-center mt-2">
                                    <div class="flex flex-wrap border space-x-2 p-2 mb-2 w-full min-h-10">
                                        <t-badge
                                            v-for="(tag,key) in activeTagList"
                                            color="success"
                                            design="filled"
                                            class="my-2 cursor-pointer"
                                            @click="deleteTag(tag)"
                                            :key="key"
                                        >
                                            {{ tag.label }}
                                        </t-badge>
                                    </div>
                                    <div class="flex flex-wrap">
                                        <t-badge
                                            v-for="(tag,key) in passiveTagList"
                                            color="light"
                                            design="filled"
                                            class="mb-2 mr-2 cursor-pointer"
                                            @click="addTag(tag)"
                                            :key="key"
                                        >
                                            {{ tag.label }}
                                        </t-badge>
                                    </div>
                                </div>
                            </div>
                            <!--Custom Select Color-->
                            <div class="flex flex-col border border-dashed p-2">
                                <h3 class="font-semibold dark:text-gray-100">Custom Selected:</h3>
                                <div class="flex flex-wrap justify-start items-center mt-2">
                                    <t-badge v-for="(tag,key) in tagBadgeCustomColor"
                                             :model-value="tag.status"
                                             :select-active-style="{color: 'success', design: 'filled'}"
                                             :select-passive-style="{color: 'light', design: 'elegant'}"
                                             class="mb-2 mr-2"
                                             v-model="tag.status"
                                             selectable
                                             select-indicator
                                             :key="key"
                                    >
                                        {{ tag.label }}
                                    </t-badge>
                                </div>
                            </div>
                        </grid-section>
                    </template>

                </t-content-card>
                <!--Closeable Badges-->
                <t-content-card :width="1">
                    <template #title>Collapsible Badges</template>
                    <template #subTitle>Click them</template>
                    <template #content>
                        <div class="flex flex-wrap space-x-4">
                            <t-badge :collapsible="true" :radius="1" color="pink" design="filled">
                                <template #icon>
                                    <icon icon="shield-alt"/>
                                </template>
                                Super Admin
                            </t-badge>
                            <t-badge :collapsible="true" :radius="8" color="danger" design="filled">
                                <template #icon>
                                    <icon icon="ban"/>
                                </template>
                                Restricted Area
                            </t-badge>
                        </div>
                    </template>
                </t-content-card>
            </grid-section>
        </template>
    </app-layout>
</template>

<script>
/*Main Functions*/
import {reactive} from "vue";

/*Components*/
import AppLayout from "@/Layouts/AppLayout.vue";
import GridSection from "@/Layouts/GridSection.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";
import TBadge from "@/Components/Badge/TBadge.vue";

/*Import FontAwesomeIcon*/
import { library } from "@fortawesome/fontawesome-svg-core";
import { faCheckCircle, faStar, faShieldAlt, faBan, faPlusCircle, faUserCircle, faUsers, faCog, faTrash} from "@fortawesome/free-solid-svg-icons";
library.add( faCheckCircle, faStar, faShieldAlt, faBan, faPlusCircle, faUserCircle, faUsers, faCog, faTrash)


export default {
    name: "Badge",
    components: {
        AppLayout,
        GridSection,
        TBadge,
        TContentCard,
    },
    setup() {
        const tagBadge = reactive([
            {id: 1, label: 'VueJS'},
            {id: 2, label: 'Tailawindcss'},
            {id: 3, label: 'Laravel'},
            {id: 4, label: 'Javascript'},
            {id: 5, label: 'CSS'}
        ])
        const activeTagList = reactive([])
        const passiveTagList = reactive([...tagBadge])

        const tagBadgeCustomColor = reactive([
            {id: 1, label: 'Urgent', status: true},
            {id: 2, label: 'Low', status: true},
            {id: 3, label: 'High', status: true},
            {id: 4, label: 'Modarete', status: false},
            {id: 5, label: 'Insignificant', status: false}
        ])

        const addTag = (tag) => {
            activeTagList.push(tag)
            passiveTagList.splice(passiveTagList.findIndex(pt => pt.id === tag.id), 1)
        }

        const deleteTag = (tag) => {
            passiveTagList.push(tag)
            activeTagList.splice(activeTagList.findIndex(pt => pt.id === tag.id), 1)
        }

        return {tagBadge, tagBadgeCustomColor, activeTagList, addTag, deleteTag, passiveTagList}
    }
};
</script>


================================================
FILE: resources/js/Pages/Samples/Components/Breadcrumb.vue
================================================
<template>
    <app-layout title="Breadcrumb">
        <template #header>Breadcrumb</template>
        <template #subHeader>2 Different breadcrumbs style</template>
        <template #default>
            <grid-section class="hidden md:block" :col="1" :gap="8">

                <div v-for="design in ['filled','block']" :key="design">
                    <t-breadcrumb
                        v-for="(color,index) in ['white','white','black','purple']"
                        :design="design" :color="color"
                        :breadcrumbs="breadcrumbs"
                        class="mb-4"
                        :position="index%2 === 0 ? 'left' : 'right'"
                        :key="color"
                        >
                        <template #home="{props}">
                            <icon icon="home" v-if="props.label === 'Home'"/>
                        </template>
                        <template #subContent>
                            <t-button v-if="index===0" color="green" size="sm">
                                <icon icon="plus-circle" size="xs"/>
                                Add Button
                            </t-button>
                            <span v-if="index===2">Alternative Title</span>
                        </template>
                    </t-breadcrumb>
                </div>
            </grid-section>
            <t-alert class="block md:hidden" color="red">The breakcrumb component works only on the large
                screens. If you want to see how ist works, you should use a large screen bigger than 728px
            </t-alert>
        </template>
    </app-layout>
</template>

<script>
/*Main Functions*/
import { defineComponent } from "vue";

/*Component*/
import AppLayout from "@/Layouts/AppLayout.vue";
import GridSection from "@/Layouts/GridSection.vue";
import TBreadcrumb from "@/Components/Breadcrumb/TBreadcrumb.vue";
import TButton from "@/Components/Button/TButton.vue";
import TAlert from "@/Components/Alert/TAlert.vue";

/*Import FontAwesomeIcon*/
import { library } from "@fortawesome/fontawesome-svg-core";
import {faHome, faPlusCircle} from "@fortawesome/free-solid-svg-icons";
library.add(faHome, faPlusCircle)

export default defineComponent({
    name: "Breadcrumb",
    components: {
        TAlert,
        AppLayout,
        GridSection,
        TBreadcrumb,
        TButton
        },
    setup() {
        const breadcrumbs = [
            {key: 'home', label: 'Home', link: '/', active: false},
            {key: 'department', label: 'Departments', link: '/department', active: false},
            {key: 'new-department', label: 'New Department', link: '', active: true, activeColor: 'solid-red'}
        ]

        return {breadcrumbs}
    }
})
</script>


================================================
FILE: resources/js/Pages/Samples/Components/Button.vue
================================================
<template>
    <app-layout title="Buttons">
        <template #header>Buttons</template>
        <template #subHeader>For all use (1.296 variations)</template>
        <template #default>
            <grid-section :col-tablet="1">
                <t-content-card :width="1">
                    <template #title>Sample Buttons</template>
                    <template
                        #subTitle
                    >Color, radius, icon, size, disabled, loading, extended and group options</template>
                    <template #content>
                        <grid-section :col-laptop="2">
                            <!--Styles-->
                            <div
                                class="flex flex-wrap justify-center md:justify-start items-center"
                            >
                                <h2 class="font-semibold mr-4">Styles</h2>
                                <div
                                    class="flex flex-wrap justify-center md:justify-start items-center border rounded w-full p-2 space-x-2 space-y-2"
                                >
                                    <!--Filled-->
                                    <t-button :radius="0" class="mt-2" color="green">Filled</t-button>
                                    <!--Light-->
                                    <t-button :radius="2" design="light" color="pink">
                                        <svg
                                            class="w-6 h-6"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                            />
                                        </svg>
                                        Light
                                    </t-button>
                                    <!--Light with Border-->
                                    <t-button :radius="1" design="light" border color="indigo">
                                        <svg
                                            class="w-6 h-6"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                            />
                                        </svg>
                                        Light with border
                                    </t-button>
                                    <!--Outline-->
                                    <t-button :radius="3" design="outline" color="yellow">Outline</t-button>
                                    <!--Link-->
                                    <t-button design="link" color="blue">Link</t-button>
                                    <!--Link Plus-->
                                    <t-button design="link-plus" color="gray">
                                        <svg
                                            class="w-6 h-6"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                            />
                                        </svg>
                                        Link Plus
                                    </t-button>
                                </div>
                            </div>

                            <!--Disabled-->
                            <div
                                class="flex flex-wrap justify-center md:justify-start items-center"
                            >
                                <h2 class="font-semibold mr-4">Disabled</h2>
                                <div
                                    class="flex flex-wrap justify-center md:justify-start items-center border rounded w-full p-2 space-x-2 space-y-2"
                                >
                                    <!--Filled-->
                                    <t-button :radius="0" class="mt-2" color="green" disabled>Filled</t-button>
                                    <!--Light-->
                                    <t-button :radius="2" design="light" color="pink" disabled>
                                        <svg
                                            class="w-6 h-6"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                            />
                                        </svg>
                                        Light
                                    </t-button>
                                    <!--Light with Border-->
                                    <t-button
                                        :radius="1"
                                        design="light"
                                        border
                                        color="indigo"
                                        disabled
                                    >
                                        <svg
                                            class="w-6 h-6"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                            />
                                        </svg>
                                        Light with border
                                    </t-button>
                                    <!--Outline-->
                                    <t-button
                                        :radius="3"
                                        design="outline"
                                        color="yellow"
                                        disabled
                                    >Outline</t-button>
                                    <!--Link-->
                                    <t-button design="link" color="blue" disabled>Link</t-button>
                                    <!--Link Plus-->
                                    <t-button design="link-plus" color="gray" disabled>
                                        <svg
                                            class="w-6 h-6"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                            />
                                        </svg>
                                        Link Plus
                                    </t-button>
                                </div>
                            </div>

                            <!--Loading-->
                            <div
                                class="flex flex-wrap justify-center md:justify-start items-center"
                            >
                                <h2 class="font-semibold mr-4">Loading</h2>
                                <div
                                    class="flex flex-wrap justify-center md:justify-start items-center border rounded w-full p-2 space-x-2 space-y-2"
                                >
                                    <!--Filled-->
                                    <t-button
                                        :radius="2"
                                        design="filled"
                                        color="pink"
                                        loading-with-content
                                        class="mt-2"
                                    >With Text</t-button>
                                    <!--Light-->
                                    <t-button :radius="2" design="light" color="pink" loading>
                                        <svg
                                            class="w-6 h-6"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                            />
                                        </svg>
                                        Light
                                    </t-button>
                                    <!--Outline-->
                                    <t-button
                                        :radius="3"
                                        design="outline"
                                        color="yellow"
                                        loading
                                        loading-design="three-dots"
                                    >Outline</t-button>
                                    <!--Link-->
                                    <t-button design="link" color="blue" loading>Link</t-button>
                                    <!--Link Plus-->
                                    <t-button
                                        design="link-plus"
                                        color="gray"
                                        loading
                                        loading-design="three-dots"
                                    >
                                        <svg
                                            class="w-6 h-6"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                            />
                                        </svg>
                                        Link Plus
                                    </t-button>
                                </div>
                            </div>

                            <!--Icon Buttons-->
                            <div
                                class="flex flex-wrap justify-center md:justify-start items-center"
                            >
                                <h2 class="font-semibold mr-4">Icon Buttons</h2>
                                <div
                                    class="flex flex-wrap justify-center md:justify-start items-center border rounded w-full p-2 space-x-2 space-y-2"
                                >
                                    <t-button :radius="0" color="pink" class="mt-2">
                                        <svg
                                            class="w-6 h-6"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                            />
                                        </svg>
                                    </t-button>
                                    <t-button :radius="3" design="light" color="indigo">
                                        <svg
                                            class="w-6 h-6"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                            />
                                        </svg>
                                    </t-button>
                                    <t-button :radius="5" design="link" color="yellow">
                                        <svg
                                            class="w-6 h-6"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                            />
                                        </svg>
                                    </t-button>
                                    <t-button :radius="8" design="link-plus" color="red">
                                        <svg
                                            class="w-6 h-6"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                            />
                                        </svg>
                                    </t-button>
                                </div>
                            </div>
                        </grid-section>
                    </template>
                </t-content-card>
                <!--Buton Sizes-->
                <t-contentCard :width="1">
                    <template #title>Buton Sizes</template>
                    <template #content>
                        <div class="flex flex-wrap gap-2 items-center justify-center w-full">
                            <t-button color="red" size="small">Small Button : small</t-button>
                            <t-button color="red" size="normal">Default : normal</t-button>
                            <t-button color="yellow" size="large">Large Button: large</t-button>
                            <t-button color="blue" size="full">Full Button : full</t-button>
                        </div>
                    </template>
                </t-contentCard>
            </grid-section>
        </template>
    </app-layout>
</template>

<script>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TButton from "@/Components/Button/TButton.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";

export default {
    name: "Button",
    components: { AppLayout, GridSection, TButton, TContentCard },
    data() {
        return {
            colors: ["solid-red", "solid-blue", "solid-green", "solid-yellow", "solid-indigo", "solid-pink", "solid-purple", "solid-gray", "solid-black", "solid-white", "light-red", "light-blue", "light-green", "light-yellow", "light-indigo", "light-pink", "light-purple", "light-gray"],
        };
    }
};
</script>

<style scoped>
</style>


================================================
FILE: resources/js/Pages/Samples/Components/Chart.vue
================================================
<template>
  <app-layout>
    <template #header>Charts</template>
    <template #subHeader>Change the tables to the show</template>
    <template #default>
      <grid-section>
        <t-content-card></t-content-card>
      </grid-section>
    </template>
  </app-layout>
</template>

<script>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";

export default {
  name: "Chart",
  components: {
    AppLayout,
    GridSection,
    TContentCard,
  }
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Components/Collapsible.vue
================================================
<template>
    <app-layout title="Collapsible Content">
        <template #header>
            Collapsible Content
        </template>
        <template #subHeader>
            Same color or different colors, collapsible or accordion
        </template>
        <template #default>
            <div class="flex flex-wrap">
                <grid-section :col-laptop="3" :col-tablet="2">
                    <!--Filled-->
                    <t-content-card>
                        <template #title>
                            Filled
                        </template>
                        <template #subTitle>
                            Click + Chevron + Collapsible + Align
                        </template>
                        <t-collapsible
                            v-model="collapsibleActive"
                            :accordion="false"
                            opening-type="click"
                            trigger-type="chevron"
                            design="filled"
                            :radius="3"
                            color="indigo"
                            :separated="false"
                        >
                            <t-collapsible-item
                                @active="collapsibleActive = $event"
                                item-key="TailAdmin"
                                color="red"
                            >
                                <template #title>
                                    <t-logo class="w-5 h-5 mr-2"/>
                                    TailAdmin
                                </template>
                                <template #content>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue vehicula
                                    imperdiet.
                                </template>
                            </t-collapsible-item>
                            <t-collapsible-item
                                @active="collapsibleActive = $event"
                                item-key="LaraQuality"
                                color="blue"
                                trigger-align="left"
                                title-align="right"
                            >
                                <template #title>
                                    <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" fill="currentColor" version="1.1" viewBox="0 0 215 215" stroke="none">
                                        <path transform="matrix(1.28 0 0 1.28 13.057 10.462)" d="m121.65 15.95-11.2 11.2q-5.9-4.75-12.8-7.3-5.7-2.35-10.05-3.15v-16.7h-22.8v16.35l-6.9 1.75q-8.1 2.55-16.15 7.5l-11.6-11.65-15.95 15.75 11.8 11.65q-6.1 8.85-8.85 19.65l-0.8 4.55h-16.35v21.65h16.75l2.15 7.45q2.35 7.9 7.3 14.4l-12 11.6 15.35 15.35 12-11.8 6.5 3.95q8.85 4.3 16.75 5.7v16.15h22.8v-16.55q8.05-1.8 15.75-5.7l5.55-3.35 11.4 11.4 16.15-16.15-11.25-11.4q5.1-7.85 7.5-16.9l1.2-4.15h16.1v-21.65h-15.75q-1.55-8.5-4.5-15.35l-3.55-5.9 12-12.05-16.55-16.3m-7.65 58.85q-0.05 15.9-11.25 27.55-11.6 11-27.55 11-16.15 0-27.55-11.4-11.2-10.85-11.2-27.15 0-15.95 11.2-27.55 11.8-11.25 27.55-11.25 15.75 0 27.55 11.25 11.2 11.8 11.25 27.55" stroke-linecap="square" stroke-width="1"/>
                                        <path transform="matrix(.34872 0 0 .34872 83.818 78.7)" d="m144.75 65.137-94.088 94.088-50.662-50.663v-65.138l50.662 50.663 94.088-94.088v65.137" stroke-linecap="square" stroke-width="6"/>
                                    </svg>
                                    LaraQuality
                                </template>
                                <template #content>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue vehicula
                                    imperdiet.
                                </template>
                            </t-collapsible-item>
                            <t-collapsible-item
                                @active="collapsibleActive = $event"
                                item-key="LaraCoin"
                                color="indigo"
                                title-align="right"
                            >
                                <template #title>
                                    <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    LaraCoin
                                </template>
                                <template #content>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue vehicula
                                    imperdiet.
                                </template>
                            </t-collapsible-item>
                        </t-collapsible>
                    </t-content-card>
                    <!--Light-->
                    <t-content-card>
                        <template #title>
                            Light
                        </template>
                        <template #subTitle>
                            Hover + Separated + Cross + Accordion
                        </template>
                        <t-collapsible
                            v-model="collapsibleActive2"
                            :accordion="true"
                            opening-type="hover"
                            trigger-type="cross"
                            design="light"
                            :radius="0"
                            :separated="true"
                        >
                            <t-collapsible-item
                                @active="collapsibleActive2 = $event"
                                item-key="TailAdmin"
                                color="red"
                            >
                                <template #title>
                                    <t-logo class="w-5 h-5 mr-2"/>
                                    TailAdmin
                                </template>
                                <template #content>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue vehicula
                                    imperdiet.
                                </template>
                            </t-collapsible-item>
                            <t-collapsible-item
                                @active="collapsibleActive2 = $event"
                                item-key="LaraQuality"
                                color="blue"
                            >
                                <template #title>
                                    <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" fill="currentColor" version="1.1" viewBox="0 0 215 215" stroke="none">
                                        <path transform="matrix(1.28 0 0 1.28 13.057 10.462)" d="m121.65 15.95-11.2 11.2q-5.9-4.75-12.8-7.3-5.7-2.35-10.05-3.15v-16.7h-22.8v16.35l-6.9 1.75q-8.1 2.55-16.15 7.5l-11.6-11.65-15.95 15.75 11.8 11.65q-6.1 8.85-8.85 19.65l-0.8 4.55h-16.35v21.65h16.75l2.15 7.45q2.35 7.9 7.3 14.4l-12 11.6 15.35 15.35 12-11.8 6.5 3.95q8.85 4.3 16.75 5.7v16.15h22.8v-16.55q8.05-1.8 15.75-5.7l5.55-3.35 11.4 11.4 16.15-16.15-11.25-11.4q5.1-7.85 7.5-16.9l1.2-4.15h16.1v-21.65h-15.75q-1.55-8.5-4.5-15.35l-3.55-5.9 12-12.05-16.55-16.3m-7.65 58.85q-0.05 15.9-11.25 27.55-11.6 11-27.55 11-16.15 0-27.55-11.4-11.2-10.85-11.2-27.15 0-15.95 11.2-27.55 11.8-11.25 27.55-11.25 15.75 0 27.55 11.25 11.2 11.8 11.25 27.55" stroke-linecap="square" stroke-width="1"/>
                                        <path transform="matrix(.34872 0 0 .34872 83.818 78.7)" d="m144.75 65.137-94.088 94.088-50.662-50.663v-65.138l50.662 50.663 94.088-94.088v65.137" stroke-linecap="square" stroke-width="6"/>
                                    </svg>
                                    LaraQuality
                                </template>
                                <template #content>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue vehicula
                                    imperdiet.
                                </template>
                            </t-collapsible-item>
                            <t-collapsible-item
                                @active="collapsibleActive2 = $event"
                                item-key="LaraCoin"
                                color="indigo"
                            >
                                <template #title>
                                    <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    LaraCoin
                                </template>
                                <template #content>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue vehicula
                                    imperdiet.
                                </template>
                            </t-collapsible-item>
                        </t-collapsible>
                    </t-content-card>
                    <!--Inline-->
                    <t-content-card>
                        <template #title>
                            Inline
                        </template>
                        <template #subTitle>
                            Hover + Separated + Cross + Accordion
                        </template>
                        <t-collapsible
                            v-model="collapsibleActive3"
                            :accordion="true"
                            opening-type="hover"
                            trigger-type="cross"
                            design="inline"
                            :radius="0"
                            :separated="false"
                        >
                            <t-collapsible-item
                                @active="collapsibleActive3 = $event"
                                item-key="TailAdmin"
                                color="red"
                            >
                                <template #title>
                                    <t-logo class="w-5 h-5 mr-2"/>
                                    TailAdmin
                                </template>
                                <template #content>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue vehicula
                                    imperdiet.
                                </template>
                            </t-collapsible-item>
                            <t-collapsible-item
                                @active="collapsibleActive3 = $event"
                                item-key="LaraQuality"
                                color="blue"
                            >
                                <template #title>
                                    <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" fill="currentColor" version="1.1" viewBox="0 0 215 215" stroke="none">
                                        <path transform="matrix(1.28 0 0 1.28 13.057 10.462)" d="m121.65 15.95-11.2 11.2q-5.9-4.75-12.8-7.3-5.7-2.35-10.05-3.15v-16.7h-22.8v16.35l-6.9 1.75q-8.1 2.55-16.15 7.5l-11.6-11.65-15.95 15.75 11.8 11.65q-6.1 8.85-8.85 19.65l-0.8 4.55h-16.35v21.65h16.75l2.15 7.45q2.35 7.9 7.3 14.4l-12 11.6 15.35 15.35 12-11.8 6.5 3.95q8.85 4.3 16.75 5.7v16.15h22.8v-16.55q8.05-1.8 15.75-5.7l5.55-3.35 11.4 11.4 16.15-16.15-11.25-11.4q5.1-7.85 7.5-16.9l1.2-4.15h16.1v-21.65h-15.75q-1.55-8.5-4.5-15.35l-3.55-5.9 12-12.05-16.55-16.3m-7.65 58.85q-0.05 15.9-11.25 27.55-11.6 11-27.55 11-16.15 0-27.55-11.4-11.2-10.85-11.2-27.15 0-15.95 11.2-27.55 11.8-11.25 27.55-11.25 15.75 0 27.55 11.25 11.2 11.8 11.25 27.55" stroke-linecap="square" stroke-width="1"/>
                                        <path transform="matrix(.34872 0 0 .34872 83.818 78.7)" d="m144.75 65.137-94.088 94.088-50.662-50.663v-65.138l50.662 50.663 94.088-94.088v65.137" stroke-linecap="square" stroke-width="6"/>
                                    </svg>
                                    LaraQuality
                                </template>
                                <template #content>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue vehicula
                                    imperdiet.
                                </template>
                            </t-collapsible-item>
                            <t-collapsible-item
                                @active="collapsibleActive3 = $event"
                                item-key="LaraCoin"
                                color="indigo"
                            >
                                <template #title>
                                    <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    LaraCoin
                                </template>
                                <template #content>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue vehicula
                                    imperdiet.
                                </template>
                            </t-collapsible-item>
                        </t-collapsible>
                    </t-content-card>
                </grid-section>
            </div>
        </template>
    </app-layout>
</template>

<script>
import {defineComponent, ref} from "vue";
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TCollapsible from "@/Components/Collapsible/TCollapsible.vue";
import TCollapsibleItem from "@/Components/Collapsible/TCollapsibleItem.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";
import TLogo from "@/Components/Icon/TLogo.vue";

export default defineComponent({
    name: "Collapsible",
    components: {
        TLogo,
        GridSection, AppLayout, TContentCard, TCollapsible, TCollapsibleItem},
    setup() {
        const collapsibleActive = ref([])
        const collapsibleActive2 = ref([])
        const collapsibleActive3 = ref([])
        const test = ref(false)

        return {collapsibleActive, collapsibleActive2, collapsibleActive3, test}
    }
})
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Components/ContentBox.vue
================================================
<template>
  <app-layout>
    <template #header>Content Card</template>
    <template #subHeader>It is a shell for your content</template>
    <template #default>
      <!--Icon Options-->
      <grid-section :col="2" :gap="4">
        <!--Users-->
        <t-content-card>
          <template #title>Users</template>
          <template #icon>
            <t-user-group-icon class="w-12 h-12"/>
          </template>
          <template #content>
            255 user/s
          </template>
        </t-content-card>
        <!--Team Member-->
        <t-content-card color="gradient-gray-to-pink">
          <template #title>Sinan AYDOĞAN</template>
          <template #icon>
            <t-avatar slot="icon" :radius="8" :size="4" src="https://i.pravatar.cc/300"/>
          </template>
          <template #content>
            Developer
          </template>
        </t-content-card>
      </grid-section>
      <!--Simple-->
      <grid-section :col="3" :gap="4">
        <t-content-card
            :border="true"
            :line="true"
            :radius="0"
            :width="1"
        >
          <template #title>
            Content Card Component Title
          </template>
          <template #subTitle>
            Solid, Light and Gradient Color Options
          </template>
          <template #content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            dapibus metus enim. In vestibulum sit amet felis vitae ornare. Sed
            posuere, mauris et dapibus tincidunt.
            <div class="flex flex-col justify-center w-full mt-6 gap-4">

            </div>
          </template>
        </t-content-card>
        <t-content-card
            :border="true"
            :line="true"
            :radius="3"
            :width="1"
            color="solid-red"
        >
          <template #title>
            Adaptive Height: False
          </template>
          <template #content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            dapibus metus enim. In vestibulum sit amet felis vitae ornare.
            <div class="flex flex-col justify-center w-full mt-6 gap-4">

            </div>
          </template>
        </t-content-card>
        <t-content-card
            :adaptive-height="true"
            :border="true"
            :line="false"
            :radius="6"
            :width="1"
            color="light-indigo"
        >
          <template #title>
            Adaptive Height: True
          </template>
          <template #content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            dapibus metus enim. In vestibulum sit amet felis vitae ornare. Sed
            posuere, mauris et dapibus tincidunt.
            <div class="flex flex-col justify-center w-full mt-6 gap-4">

            </div>
          </template>
        </t-content-card>
      </grid-section>
    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import GridSection from "@/Layouts/GridSection.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";
import TUserGroupIcon from "@/Components/Icon/TUserGroupIcon.vue";
import TAvatar from "@/Components/Avatar/TAvatar.vue";

export default {
  name: "ContentBox",
  components: {
    TAvatar,
    TUserGroupIcon,
    TContentCard,
    GridSection,
    AppLayout,
  }
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Components/Dropdown.vue
================================================
<template>
    <app-layout title="Dropdowns">
        <template #header>
            Dropdowns
        </template>
        <template #subHeader>
            Menu or multi functional buttons
        </template>
        <template #default>
            <grid-section :col="1">
                <t-content-card :width="1">
                    <template #button-trigger>Simple</template>
                    <template #subTitle>Link (Blank, Internal, External and Route) and Icons</template>
                    <template #content>
                        <div class="flex flex-wrap items-center justify-center space-x-4">
                            <!--Indigo-->
                            <t-dropdown color="solid-white" size="fit">
                                <template #trigger>
                                    Fit Links
                                </template>
                                <t-dropdown-item>Menu 1</t-dropdown-item>
                                <t-dropdown-item>Menu 2</t-dropdown-item>
                                <t-dropdown-item>Menu 3</t-dropdown-item>
                            </t-dropdown>

                            <!--With Icon-->
                            <t-dropdown button-color="purple" button-design="outline" align="right" size="fit">
                                <template #trigger>
                                    Wide Links
                                </template>
                                <t-dropdown-item :link="route('alert')">
                                    <template #icon>
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                                        </svg>
                                    </template>
                                    Alert Component
                                </t-dropdown-item>
                                <t-dropdown-item :link="route('badge')">
                                    <template #icon>
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                                        </svg>
                                    </template>
                                    Badge Component
                                </t-dropdown-item>
                                <t-dropdown-item :link="route('list')">
                                    <template #icon>
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                                        </svg>
                                    </template>
                                    List Component
                                </t-dropdown-item>
                            </t-dropdown>

                            <!--Rich Trigger-->
                            <t-dropdown size="fit" align="right" trigger-type="rich">
                                <div class="bg-white rounded-md border mt-1 overflow-hidden w-32">
                                    <t-dropdown-item>
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                        Profile
                                    </t-dropdown-item>
                                    <t-dropdown-item>
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
                                        </svg>
                                        Wallet
                                    </t-dropdown-item>
                                    <span
                                        class="inline-flex px-2 pb-2 pt-1 -mb-1 border-t border-red-500 w-full gap-1 h-full items-center text-red-500 bg-gray-100 hover:bg-red-500 hover:text-white">
                      <t-log-out-icon class="w-5 h-5"/>
                    Logout
                  </span>
                                </div>
                                <template #trigger>
                                    <t-avatar src="https://i.pravatar.cc"
                                              :indicator="{color:'solid-green',position:'rb'}"/>
                                </template>
                            </t-dropdown>

                            <!--Table Action Trigger-->
                            <t-dropdown align="right" size="fit" trigger-type="rich">
                                <template #trigger>
                                    <div class="flex justify-center items-center h-10 w-10 hover:bg-gray-200 rounded-md">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
                                             viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/>
                                        </svg>
                                    </div>
                                </template>
                                <t-list :radius="3">
                                    <t-list-item class="hover:bg-red-100 hover:text-red-500 cursor-pointer text-sm">
                                        <div class="flex items-center h-6">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
                                                 viewBox="0 0 24 24"
                                                 stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                      stroke-width="2"
                                                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                            </svg>
                                            Delete
                                        </div>
                                    </t-list-item>
                                    <t-list-item class="hover:bg-blue-100 hover:text-blue-500 cursor-pointer text-sm">
                                        <div class="flex items-center h-6">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
                                                 viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                      stroke-width="2"
                                                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                            </svg>
                                            Edit
                                        </div>
                                    </t-list-item>
                                    <t-list-item class="hover:bg-blue-100 hover:text-blue-500 cursor-pointer text-sm">
                                        <div class="flex items-center h-6">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
                                                 viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                      stroke-width="2"
                                                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                      stroke-width="2"
                                                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                            </svg>
                                            View
                                        </div>
                                    </t-list-item>
                                </t-list>
                            </t-dropdown>
                        </div>
                    </template>
                </t-content-card>
            </grid-section>
        </template>
    </app-layout>
</template>

<script>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TDropdown from "@/Components/Dropdown/TDropdown.vue";
import TDropdownItem from "@/Components/Dropdown/TDropdownItem.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";
import TList from "@/Components/List/TList.vue";
import TListItem from "@/Components/List/TListItem.vue";
import TAvatar from "@/Components/Avatar/TAvatar.vue";
import TLogOutIcon from "@/Components/Icon/TLogOutIcon.vue";

export default {
    name: "Dropdown",
    components: {
        TListItem,
        TList,
        TLogOutIcon, TAvatar, TContentCard, GridSection, AppLayout, TDropdown, TDropdownItem
    }
}
</script>


================================================
FILE: resources/js/Pages/Samples/Components/List.vue
================================================
<template>
  <app-layout title="Lists">
    <template #header>Lists</template>
    <template #subHeader>Content items, shopping lists or todo list</template>
    <template #default>
      <!-- Color Selector -->
      <t-component-style-selector
        class="mb-4"
        v-model="selectedData"
        :select-data="selectData"
      />
      <transition name="alert">
        <t-toastr
          id="alert"
          v-show="(selectedData.design === 'outline' || selectedData.design === 'elegant')"
          color="solid-white"
          class="bg-opacity-75 text-gray-700 mb-2"
          style="z-index: 999999"
        >
          <div class="flex flex-col">
            <b class="text-yellow-700 font-semibold">Warning</b>
            Outline and Elegant designs defaulted have border, and it's not an option
          </div>
        </t-toastr>
      </transition>
      <t-content-card>
        <template #title>
          Samples
        </template>

        <grid-section :col-tablet="2" :col-laptop="3">
          <!--Simple-->
          <t-list
            :color="selectedData.color"
            :design="selectedData.design"
            :border="selectedData.border"
            :radius="0"
            :separated="selectedData.separated"
          >
            <t-list-item :active="selectedCheckbox.includes('Cheery')">
              <template #icon>
                <t-input-check-box v-model="selectedCheckbox" input-value="Cheery" :color="selectedData.color" />
              </template>
              Cheery
            </t-list-item>
            <t-list-item :active="selectedCheckbox.includes('Banana')">
              <template #icon>
                <t-input-check-box v-model="selectedCheckbox" input-value="Banana" :color="selectedData.color" />
              </template>
              Banana
            </t-list-item>
            <t-list-item :active="selectedCheckbox.includes('Strawberry')">
              <template #icon>
                <t-input-check-box v-model="selectedCheckbox" input-value="Strawberry" :color="selectedData.color" />
              </template>
              Strawberry
            </t-list-item>
            <t-list-item :active="selectedCheckbox.includes('Lemon')">
              <template #icon>
                <t-input-check-box v-model="selectedCheckbox" input-value="Lemon" :color="selectedData.color" />
              </template>
              Lemon
            </t-list-item>
          </t-list>
          <!--With Title-->
          <t-list
            :color="selectedData.color"
            :design="selectedData.design"
            :border="selectedData.border"
            :separated="selectedData.separated"
            :radius="3"
          >
            <t-list-item>
              <template #title>Name:</template>
              <template #default>Sinan Aydoğan</template>
            </t-list-item>
            <t-list-item>
              <template #title>Title:</template>
              <template #default>Developer</template>
            </t-list-item>
            <t-list-item>
              <template #title>Birthday:</template>
              <template #default>1987</template>
            </t-list-item>
            <t-list-item>
              <template #title>Country:</template>
              <template #default>Turkey</template>
            </t-list-item>
          </t-list>
          <!--With Icon-->
          <t-list :color="selectedData.color" :design="selectedData.design" :border="selectedData.border" :radius="5"
                  :separated="selectedData.separated">
            <t-list-item>
              <template #icon>
                <icon :icon="['fab','vuejs']" />
              </template>
              <template #default>VueJS components inside</template>
            </t-list-item>
            <t-list-item>
              <template #icon>
                <icon :icon="['fab','js']" />
              </template>
              <template #default>Powered by JavaScript</template>
            </t-list-item>
            <t-list-item>
              <template #icon>
                <icon :icon="['fab','css3']" />
              </template>
              <template #default>Polished with TailwindCSS</template>
            </t-list-item>
            <t-list-item>
              <template #icon>
                <icon icon="chart-bar" />
              </template>
              <template #default>Detailed some graphics with ChartJS</template>
            </t-list-item>
          </t-list>
          <!--With Avatar-->
          <t-list :color="selectedData.color" :design="selectedData.design" :border="selectedData.border" :radius="3"
                  :separated="selectedData.separated">
            <t-list-item>
              <template #icon>
                <t-avatar :radius="8" :size="2" src="https://i.pravatar.cc/150?u=1"></t-avatar>
              </template>
              <template #default>Sinem Aydoğan</template>
            </t-list-item>
            <t-list-item>
              <template #icon>
                <t-avatar :radius="8" :size="2" src="https://i.pravatar.cc/150?u=2"></t-avatar>
              </template>
              <template #default>Zuhal Taşçı</template>
            </t-list-item>
            <t-list-item>
              <template #icon>
                <t-avatar :radius="8" :size="2" src="https://i.pravatar.cc/150?u=3"></t-avatar>
              </template>
              <template #default>Ayşe Gürel</template>
            </t-list-item>
            <t-list-item>
              <template #icon>
                <t-avatar :radius="8" :size="2" src="https://i.pravatar.cc/150?u=4"></t-avatar>
              </template>
              <template #default>Günel Deren</template>
            </t-list-item>
          </t-list>
          <!--With SecondContent -->
          <t-list :color="selectedData.color" :design="selectedData.design" :border="selectedData.border" :radius="3"
                  :separated="selectedData.separated">
            <t-list-item>
              <template #default>
                Users
              </template>
              <template #secondContent>
                <t-badge :radius="5">120</t-badge>
              </template>
            </t-list-item>
            <t-list-item>
              <template #default>Materials</template>
              <template #secondContent>
                <t-badge :radius="5" color="red">6 pcs.</t-badge>
              </template>
            </t-list-item>
            <t-list-item>
              <template #default>Costs</template>
              <template #secondContent>
                <t-button :radius="2" design="light" border :color="selectedData.color" size="small">+ Add new
                  cash
                </t-button>
              </template>
            </t-list-item>
          </t-list>
        </grid-section>
      </t-content-card>
    </template>
  </app-layout>
</template>

<script>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TList from "@/Components/List/TList.vue";
import TListItem from "@/Components/List/TListItem.vue";
import TBadge from "@/Components/Badge/TBadge.vue";
import TButton from "@/Components/Button/TButton.vue";
import TAvatar from "@/Components/Avatar/TAvatar.vue";
import TComponentStyleSelector from "@/Components/Misc/TComponentStyleSelector.vue";
import TToastr from "@/Components/Toastr/TToastr.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";
import TInputCheckBox from "@/Components/Form/Inputs/TInputCheckBox.vue";
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
  name: "List",
  components: {
    TInputCheckBox,
    TContentCard,
    TToastr,
    GridSection,
    TListItem,
    TList,
    AppLayout,
    TBadge,
    TButton,
    TAvatar,
    TComponentStyleSelector
  },
  setup() {
    const selectedData = reactive({
      color: "blue",
      design: "filled",
      border: true,
      separated: false
    });
    const selectedCheckbox = ref(["Cheery", "Banana", "Strawberry"]);
    const selectData = reactive([
      {
        key: "design",
        label: "Design",
        options: [
          { key: "filled", label: "Design: Filled" },
          { key: "light", label: "Design: Light" },
          { key: "outline", label: "Design: Outline" },
          { key: "elegant", label: "Design: Elegant" },
          { key: "simple", label: "Design: Simple" }
        ]
      },
      {
        key: "border",
        label: "Border",
        options: [
          { key: true, label: "Border: True" },
          { key: false, label: "Border: False" }
        ]
      },
      {
        key: "separated",
        label: "Separated",
        options: [
          { key: true, label: "Separated: True" },
          { key: false, label: "Separated: False" }
        ]
      }
    ]);

    return { selectedData, selectedCheckbox, selectData };
  }
});
</script>

<style scoped>
.alert-enter-active, .alert-leave-active {
  transition: opacity ease-out .75s;
}

.alert-enter, .alert-leave-to {
  opacity: 0;
  height: revert;
}

.alert-enter-to, .alert-leave {
  opacity: 1;
  height: revert;
}
</style>


================================================
FILE: resources/js/Pages/Samples/Components/Loading.vue
================================================
<template>
  <app-layout>
    <template #header>Loading Animations and Screens</template>
    <template #subHeader>Pretty and sweet loading indicators</template>
    <template #default>
      <grid-section :col-desktop="1">
        <t-content-card :width="1">
          <template #title>Click to the buttons for loading screens</template>
          <template #subTitle>2 animations for buttons' inside and a lot of loading screen options</template>
          <template #content>
            <div class="flex flex-wrap gap-2 mt-4 items-center justify-start">
              <!--Simple Loading Screen with Cogs-->
              <t-button
                design="filled"
                color="green"
                type="button"
                @click="showLoadingScreenSimpleCogs = !showLoadingScreenSimpleCogs"
              >
                Show Loading Screen with Cogs
              </t-button>
              <t-loading
                :radius="3"
                loading-design="cogs"
                color="white"
                v-model="showLoadingScreenSimpleCogs"
                closeable
              />
              <!--Simple Loading Screen with Bars-->
              <t-button
                design="filled"
                color="indigo"
                type="button"
                @click="showLoadingScreenSimpleBars = !showLoadingScreenSimpleBars"
              >
                Show Loading Screen with Bars
              </t-button>
              <t-loading
                :radius="3"
                loading-design="three-bars"
                color="indigo"
                v-model="showLoadingScreenSimpleBars"
                closeable
              />
              <!--Simple Loading Screen : Dots-->
              <t-button
                design="filled"
                color="blue"
                type="button"
                @click="showLoadingScreenSimpleDots = !showLoadingScreenSimpleDots"
              >
                Show Loading Screen with Dots
              </t-button>
              <t-loading
                :radius="3"
                loading-design="three-dots"
                color="blue"
                v-model="showLoadingScreenSimpleDots"
                closeable
              />
              <!--Closeable Loading Screen-->
              <t-button
                design="light"
                color="black"
                type="button"
                @click="showLoadingScreenCloseable = !showLoadingScreenCloseable">
                Closeable Loading Screen
              </t-button>
              <t-loading
                closeable
                :radius="3"
                :color="selectedColor"
                v-model="showLoadingScreenCloseable"
              >
                <div class="flex flex-col">
                  <div class="flex">
                    <img
                      src="https://camo.githubusercontent.com/8321556a8c584594e7eeed9625375cc4639ebbde4bd527b8d150cb212d95dbf6/68747470733a2f2f7461696c61646d696e2e6465762f696d672f6d6973632f30315f7461696c61646d696e2e6a7067">
                  </div>
                  <!--Color Select-->
                  <div class="flex flex-col m-auto">
                    <div
                      class="flex flex-row max-w-min mx-auto mt-4 overflow-hidden justify-center bg-gradient-to-tr from-white to-gray-300  p-2 rounded-lg flex-shrink-0 flex-grow-0">
                      <t-button
                        size="small"
                        design="filled"
                        class="first:rounded-l-lg last:rounded-r-lg overflow-hidden shadow-lg ring-0 active:ring-0 focus:ring-0"
                        :radius="0"
                        type="button"
                        v-for="color in colors" :color="color.key"
                        @click="changeColor(color.key)"
                      >
                        {{ color.label }}
                      </t-button>
                    </div>
                    <div
                      class="flex w-full justify-center font-semibold text-gray-700 flex-shrink-0 flex-grow-0">
                      <span class="flex bg-gradient-to-b from-gray-400 to-white px-2 rounded-b-lg">Color Options</span>
                    </div>
                  </div>
                </div>
              </t-loading>
              <!--Timed Loading Screen For Close-->
              <t-button
                design="outline"
                color="red"
                type="button"
                @click="showLoadingScreenTimed = !showLoadingScreenTimed"
              >
                Timed Loading Screen For Close
              </t-button>
              <t-loading
                :timer="6000"
                :radius="3"
                :color="selectedColor"
                v-model="showLoadingScreenTimed"
              >
                <div class="flex flex-col">
                  <!--Color Select-->
                  <div class="mb-4">
                    <div class="flex mx-auto justify-center font-semibold text-lg text-gray-800">
                    <span
                      class="flex bg-gradient-to-tl from-gray-100 to-white px-2 pt-1 rounded-t-lg">Color Options</span>
                    </div>
                    <div
                      class="flex flex-row max-w-min mx-auto overflow-hidden  bg-gradient-to-tl from-gray-300 to-white p-2 rounded-lg">
                      <t-button
                        design="filled"
                        class="first:rounded-l-lg last:rounded-r-lg overflow-hidden shadow-lg ring-0 active:ring-0 focus:ring-0"
                        :radius="0"
                        type="button"
                        v-for="color in colors" :color="color.key"
                        @click="changeColor(color.key)"
                      >
                        {{ color.label }}
                      </t-button>
                    </div>
                  </div>
                  <img
                    alt="Demo"
                    class="flex mx-auto h-1/2 w-1/2"
                    src="https://images.unsplash.com/photo-1585251172245-4e87f155fc30?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80"
                  >
                </div>
              </t-loading>
            </div>
          </template>
        </t-content-card>
      </grid-section>
    </template>
  </app-layout>
</template>

<script>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";
import TButton from "@/Components/Button/TButton.vue";
import TLoading from "@/Components/Loading/TLoading.vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "Modal",
  components: {
    TLoading,
    AppLayout, GridSection, TButton, TContentCard
  },
  setup() {
    const selectedColor = ref("gray");
    const showLoadingScreenSimpleCogs = ref(false);
    const showLoadingScreenSimpleBars = ref(false);
    const showLoadingScreenSimpleDots = ref(false);
    const showLoadingScreenCloseable = ref(false);
    const showLoadingScreenTimed = ref(false);

    const colors = [
      { key: "black", label: "Black" },
      { key: "blue", label: "Blue" },
      { key: "gray", label: "Gray" },
      { key: "green", label: "Green" },
      { key: "indigo", label: "Indigo" },
      { key: "pink", label: "Pink" },
      { key: "purple", label: "Purple" },
      { key: "white", label: "White" },
      { key: "yellow", label: "Yellow" }
    ];

    const changeColor = (color) => {
      selectedColor.value = color;
    };

    return {
      selectedColor,
      changeColor,
      colors,
      showLoadingScreenSimpleBars,
      showLoadingScreenSimpleDots,
      showLoadingScreenSimpleCogs,
      showLoadingScreenCloseable,
      showLoadingScreenTimed
    };
  }
});
</script>


================================================
FILE: resources/js/Pages/Samples/Components/Modal.vue
================================================
<template>
  <app-layout>
    <template #header>Modals</template>
    <template #subHeader>Pretty and sweet windows</template>
    <template #default>
      <t-content-card>
        <template #title>Click to the buttons for show modal windows</template>
        <template #subTitle>10 solid, 8 light and limitless gradient color options with radius</template>
        <grid-section :col-tablet="2" :col-laptop="4">

          <!--Simple Modal-->
          <t-button
              color="white"
              type="button"
              @click="showModal1 = !showModal1"
          >
            Show Simple Modal
          </t-button>
          <!--With Timer-->
          <t-button
              design="light"
              color="blue"
              type="button"
              @click="showModal2 = !showModal2"
          >
            With Timer
          </t-button>
          <!--With ESC & Out-Side Click-->

          <t-button
              color="red"
              type="button"
              @click="showModal3 = !showModal3"
          >
            With ESC & Out-Side Click
          </t-button>

          <!--With Predefined Icons-->

          <t-button
              color="indigo"
              type="button"
              @click="showModal4 = !showModal4"
          >
            With Predefined Icons
          </t-button>

        </grid-section>
        <!--Simple-->
        <teleport to="body">
          <t-modal
              title="Registration"
              sub-title="Your register success"
              content="User infos registered to database<br> Please check your mailbox for apply message"
              :dark-mode="selectedDarkMode"
              :bg-color="selectedBgColor"
              :design="selectedDesign"
              :color="selectedColor"
              icon="success"
              :radius="3"
              v-model="showModal1"
          >
            <template #action-buttons>

              <!--Show-->
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                   stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
              </svg>
              <!--Edit-->
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                   stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
              </svg>
              <!--Settings-->
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                   stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
              </svg>

            </template>
            <template #header>Modal Header</template>
            <template #content>
              <grid-section :col="2">
                <t-input-group label="Box Design">
                  <t-input-select :options="designOptions" v-model="selectedDesign"/>
                </t-input-group>
                <t-input-group label="Box Color">
                  <t-input-select :options="colorOptions" v-model="selectedColor"/>
                </t-input-group>
                <t-input-group label="Dark Mode">
                  <t-input-select :options="darkModeOptions" v-model="selectedDarkMode"/>
                </t-input-group>
                <t-input-group label="Background Color">
                  <t-input-select :options="colorOptions" v-model="selectedBgColor"/>
                </t-input-group>
              </grid-section>
            </template>
            <template #footer-right>
              <t-button :radius="3" color="white" @click.native="showModal1 = false">
                Close
              </t-button>
              <t-button :radius="3" color="green">
                <icon icon="save"/>
                Save
              </t-button>
            </template>
          </t-modal>
        </teleport>
        <!--With Timer-->
        <teleport to="body">
          <t-modal
              title="Timed Modal"
              sub-title="Countdown: 3 seconds"
              content="This modal will close after 3 seconds"
              :timer="3000"
              :radius="3"
              out-side-click
              v-model="showModal2"
              bg-color="blue"
          >
          </t-modal>
        </teleport>
        <!--With ESC & Out-Side Click-->
        <teleport to="body">
          <t-modal
              v-model="showModal3"
              :radius="3"
              design="elegant"
              color="red"
              title="ESC + Outside Click"
              sub-title="Different ways for close"
              content="You can click to outside of this modal or <br>press to ESC key on the keyboard"
              out-side-click
              esc
          >
            <template #footer-left>
              <t-button :radius="3" color="white" @click.native="showModal3 = false">
                Cancel
              </t-button>
            </template>
            <template #footer-right>
              <t-button :radius="3" design="light" color="red">
                <icon icon="trash"/>
                Delete it
              </t-button>
            </template>
          </t-modal>
        </teleport>
        <!--With Predefined Icon-->
        <teleport to="body">
          <t-modal
              v-model="showModal4"
              color="white"
              bg-color="yellow"
              :radius="3"
              title="Please wait"
              sub-title="Your test will be ready after 30 minutes"
          >
            <template #icon>
              <svg class="w-20 h-20 text-yellow-500" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 120.88 122.88">
                <title>30-seconds</title>
                <path
                    d="M60.22,113.81a4.54,4.54,0,0,1,0,9.07A60.23,60.23,0,1,1,89.71,10.16l-1.26-3.3a5.06,5.06,0,1,1,9.45-3.6l5,13.15a5,5,0,0,1,.32,1.55,5,5,0,0,1-3.51,5.64L86.27,27.72a5,5,0,0,1-2.92-9.65l1.28-.39a50.55,50.55,0,0,0-10.19-4.19A51.17,51.17,0,1,0,60.22,113.81ZM42.78,91.21c-.6,0-1.18,0-1.75-.06s-1.12-.09-1.67-.16-1.08-.15-1.58-.24-1-.2-1.46-.33V86.26c.61,0,1.27.1,2,.14l2.17.08,2,0A6.82,6.82,0,0,0,44,86.37a1.89,1.89,0,0,0,.9-.43,1.13,1.13,0,0,0,.29-.81V84.8a1,1,0,0,0-.42-.89,1.61,1.61,0,0,0-1-.3H42.35a7.17,7.17,0,0,1-4.76-1.38Q36,80.85,36,77.61v-.89a5.45,5.45,0,0,1,1.78-4.45,7.89,7.89,0,0,1,5.14-1.47,22.61,22.61,0,0,1,2.39.12c.75.08,1.45.18,2.11.3s1.24.24,1.77.36v4.17c-.83-.08-1.76-.13-2.8-.18s-2-.07-2.82-.07a7.88,7.88,0,0,0-1.36.11,1.76,1.76,0,0,0-.92.43,1.31,1.31,0,0,0-.32.95v.27a1.25,1.25,0,0,0,.43,1,2.11,2.11,0,0,0,1.33.35h1.78a6.38,6.38,0,0,1,3.15.71,4.67,4.67,0,0,1,1.89,2,6,6,0,0,1,.64,2.8V85a7.08,7.08,0,0,1-.9,3.92,4.34,4.34,0,0,1-2.54,1.82,14.15,14.15,0,0,1-3.94.48Zm16.15,0a10.92,10.92,0,0,1-1.56-.14,5.41,5.41,0,0,1-1.75-.59,3.72,3.72,0,0,1-1.42-1.42,5.17,5.17,0,0,1-.57-2.64V75.93a5.63,5.63,0,0,1,.46-2.43A4,4,0,0,1,55.28,72a4.7,4.7,0,0,1,1.62-.79A7,7,0,0,1,58.63,71c1.51,0,2.82,0,3.91.07s2,.09,2.83.15,1.51.12,2.13.19V75.8H60.25a1.51,1.51,0,0,0-1,.3,1.08,1.08,0,0,0-.36.89v1.68l7.27.27V83.1l-7.27.27v1.51a1.84,1.84,0,0,0,.15.8,1,1,0,0,0,.42.46,1.21,1.21,0,0,0,.6.15H67.5v4.43c-.78.11-1.66.2-2.65.27s-2,.13-3,.16-2,.06-2.89.06Zm18.9,0a10.62,10.62,0,0,1-3-.41,5.06,5.06,0,0,1-2.33-1.49A7.29,7.29,0,0,1,71,86.21a22.24,22.24,0,0,1-.52-5.27A20.22,20.22,0,0,1,71,75.8a7.51,7.51,0,0,1,1.53-3.09,5.2,5.2,0,0,1,2.34-1.52,10,10,0,0,1,3-.42,21.46,21.46,0,0,1,3,.18,18.67,18.67,0,0,1,2.19.42,9.78,9.78,0,0,1,1.45.48v4.08c-.35-.07-.79-.14-1.33-.21s-1.15-.13-1.85-.18-1.44-.06-2.26-.06a5.74,5.74,0,0,0-1.55.18,1.82,1.82,0,0,0-1,.76,4.17,4.17,0,0,0-.56,1.66A20.28,20.28,0,0,0,75.7,81a22.52,22.52,0,0,0,.13,2.7,4.41,4.41,0,0,0,.49,1.69,1.92,1.92,0,0,0,1,.87,4.89,4.89,0,0,0,1.72.25c1.37,0,2.48,0,3.34-.06s1.53-.11,2-.18v4.08a10,10,0,0,1-1.58.46,17.32,17.32,0,0,1-2.13.3c-.81.07-1.77.11-2.89.11Zm-30.32-26c-2.32,0-4.56-.1-6.74-.3s-4.18-.5-6-.87V57.28h9.48a14.79,14.79,0,0,0,2.63-.18,2.22,2.22,0,0,0,1.28-.56,1.6,1.6,0,0,0,.35-1.09v-.82a1.87,1.87,0,0,0-.4-1.26A2.32,2.32,0,0,0,47,52.65a7,7,0,0,0-1.83-.28L37.38,52V45.5L44.73,45a7.5,7.5,0,0,0,2.56-.52,1.41,1.41,0,0,0,.83-1.39v-.39a1.9,1.9,0,0,0-.87-1.78A6.83,6.83,0,0,0,44,40.42H35.17V33.64c1.88-.32,3.87-.62,5.95-.89a39.39,39.39,0,0,1,6.35-.33,12.44,12.44,0,0,1,4.8.93,6.74,6.74,0,0,1,3.11,2.7,8.8,8.8,0,0,1,1.08,4.58v2.18a10,10,0,0,1-.19,2,5.79,5.79,0,0,1-.63,1.69,4.79,4.79,0,0,1-1.13,1.33,5.72,5.72,0,0,1-1.7.91,4.61,4.61,0,0,1,1.81,1,5.86,5.86,0,0,1,1.25,1.58,7.93,7.93,0,0,1,.77,2.07,11.29,11.29,0,0,1,.26,2.45V57.1a7.43,7.43,0,0,1-2.5,6,10.44,10.44,0,0,1-6.89,2.09Zm21.29,0a10.55,10.55,0,0,1-4.93-1,6.54,6.54,0,0,1-2.93-3,10.71,10.71,0,0,1-1-4.72V41.63a11.2,11.2,0,0,1,1-5,7,7,0,0,1,3-3.11,10.16,10.16,0,0,1,4.83-1.06h7a9.35,9.35,0,0,1,4.63,1.06,6.91,6.91,0,0,1,2.86,3.11,11.64,11.64,0,0,1,1,5V56.45a9,9,0,0,1-2.19,6.43,8.25,8.25,0,0,1-6.33,2.35Zm2.09-7.56H73.5a2.17,2.17,0,0,0,2.43-2.52V42.5a2.55,2.55,0,0,0-.61-2,2.26,2.26,0,0,0-1.48-.5H70.59a2.06,2.06,0,0,0-1.66.61,2.94,2.94,0,0,0-.52,1.91V55.1a2.65,2.65,0,0,0,.61,2,2.62,2.62,0,0,0,1.87.59Zm40.33-27.91c-3.52-5.29-11.65-.65-8.57,5.21l.14.22A50,50,0,0,1,107,43.27a5,5,0,1,0,9.28-3.83,61.08,61.08,0,0,0-5.07-9.68ZM77.27,110.47a5,5,0,1,0,3.36,9.46,60.29,60.29,0,0,0,9.94-4.55,5,5,0,0,0-5-8.7,55.52,55.52,0,0,1-8.3,3.79ZM99.4,95c-3.66,4.44,2.09,10.86,7.08,7a5.37,5.37,0,0,0,.71-.72,64.19,64.19,0,0,0,6.11-9.06,5,5,0,0,0-8.48-5.34A77.5,77.5,0,0,1,99.4,95Zm10.88-24.81a5,5,0,0,0,9.63,2.58,4.83,4.83,0,0,0,.3-1.13,60.28,60.28,0,0,0,.64-10.9c-.28-6.19-9.41-6.63-10-.12v.82a52.28,52.28,0,0,1-.55,8.75Z"></path>
              </svg>
            </template>
            <template #footer-left>
              <t-button :radius="3" color="white" @click.native="showModal4 = false">
                Cancel
              </t-button>
            </template>
            <template #footer-right>
              <t-button loading :radius="3" design="light" color="green">
                Wait
              </t-button>
            </template>
          </t-modal>
        </teleport>
      </t-content-card>
    </template>
  </app-layout>
</template>

<script>
/*Layout*/
import {ref, reactive, defineComponent} from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";
import TModal from "@/Components/Modal/TModal.vue";
import TButton from "@/Components/Button/TButton.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputSelect from "@/Components/Form/Inputs/TInputSelect.vue";

export default defineComponent({
  name: "Modal",
  components: {
    TInputSelect,
    AppLayout, GridSection,  TButton, TContentCard, TModal,  TInputGroup
  },
  setup() {
    /*Definitions*/
    const selectedDarkMode = ref(false)
    const selectedDesign = ref('elegant')
    const selectedBgColor = ref('black')
    const selectedColor = ref('white')
    const darkModeOptions = reactive([
      {key: true, label: 'Dark: true'},
      {key: false, label: 'Dark: false'}
    ])
    const colorOptions = reactive([
      {key: 'red', label: 'Red'},
      {key: 'blue', label: 'Blue'},
      {key: 'green', label: 'Green'},
      {key: 'yellow', label: 'Yellow'},
      {key: 'indigo', label: 'Indigo'},
      {key: 'purple', label: 'Purple'},
      {key: 'pink', label: 'Pink'},
      {key: 'gray', label: 'Gray'},
      {key: 'white', label: 'White'},
      {key: 'black', label: 'Black'}
    ])
    const designOptions = reactive([
      {key: 'filled', label: 'Filled'},
      {key: 'elegant', label: 'Elegant'}
    ])

    return {
      darkModeOptions,
      colorOptions,
      designOptions,
      selectedDarkMode,
      selectedColor,
      selectedBgColor,
      selectedDesign
    }
  },
  data() {
    return {
      showModal1: false,
      showModal2: false,
      showModal3: false,
      showModal4: false,
      form: this.$inertia.form({
        _method: 'POST',
        name: null,
        email: null,
      }),
    }
  },
  methods: {
    reset: function () {
      this.form.name = null;
      this.form.email = null;
    },
    testMetodu() {
      alert('kedi')
    }
  }
})
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Components/Paginate.vue
================================================
<template>
  <app-layout title="Pagination">
    <template #header>Pagination</template>
    <template #subHeader>Tables, lists and all of lists</template>
    <template #default>
      <t-component-style-selector class="mb-4" v-model="selectedData"/>
      <grid-section :col-desktop="2" :gap="4">
        <content-card :width="1">
          <t-paginate
              reverse
              v-model="activePage1"
              :color="selectedData.color"
              :range="5"
              :total="54321"
              jump
          />
          <t-paginate
              v-model="activePage2"
              :color="selectedData.color"
              :radius="3"
              :range="3"
              :total="17"
              :jump="false"
              :arrow-text="false"
          />
        </content-card>
        <content-card :width="1">
          <t-paginate
              v-model="activePage3"
              :color="selectedData.color"
              :radius="5"
              :range="4"
              :total="17"
              :detail="false"
          />
          <t-paginate
              :jump="true"
              v-model="activePage4"
              :color="selectedData.color"
              :radius="8"
              :range="5"
              :total="17"
          />
        </content-card>
      </grid-section>
    </template>
  </app-layout>
</template>

<script>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import ContentCard from "@/Components/Card/TContentCard.vue";
import TPaginate from "@/Components/Paginate/TPaginate.vue";
import TComponentStyleSelector from "@/Components/Misc/TComponentStyleSelector.vue";

export default {
  name: "Paginate",
  components: {ContentCard, GridSection, AppLayout, TPaginate, TComponentStyleSelector},
  data() {
    return {
      activePage1: 2,
      activePage2: 1,
      activePage3: 5,
      activePage4: 10,
      selectedData: {
        color: 'gray'
      },
    }
  }
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Components/Progress.vue
================================================
<template>
  <app-layout>
    <template #header>Progress Bars</template>
    <template #subHeader>Loading, graphical indicator and more than</template>
    <template #default>
      <grid-section :col="1">
        <t-content-card :width="1">
          <template #title>Simple and colorful</template>
          <template #subTitle>8 different color and 5 different height</template>
          <template #content>

            <div class="flex flex-col w-full gap-4">
              <div class="flex flex-col md:flex-row justify-center space-y-2 md:space-x-2 items-center w-full">
                <t-input-group class="w-full md:w-36" label="Target Value" label-for="target">
                  <t-input-text v-model.lazy.number="target" type="number" />
                </t-input-group>
                <t-progress :height="1" v-model="target" title="Performance" />
              </div>
              <t-progress :height="2" :model-value="10" counter-text="$a" color="indigo" title="Claim" />
              <t-progress :height="3" :model-value="50" counter-text="$a TRY" color="yellow" title="Cost" />
              <t-progress :height="4" :model-value="75" counter-text="$a Hour/Person" color="purple"
                          title="Working Costs" />
              <t-progress :height="5" :model-value="25040" :max="100000" counter-text="-$aK"
                          color="red"
                          title="Lost" />
            </div>
          </template>
        </t-content-card>
      </grid-section>
    </template>
  </app-layout>
</template>

<script>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
import { defineComponent, ref, watch } from "vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";
import TProgress from "@/Components/Progress/TProgress.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";

export default defineComponent({
  name: "Progress",
  components: { TInputText, TInputGroup, TProgress, TContentCard, GridSection, AppLayout },
  setup() {
    const target = ref(25);

    watch(target,
      (newValue) => {
        if (newValue.toString() === null || isNaN(newValue) || newValue.toString() === "") {
          target.value = 0;
        }
      });
    return { target };
  }
});
</script>


================================================
FILE: resources/js/Pages/Samples/Components/Tab.vue
================================================
<template>
  <app-layout>
    <template #header>
      Tabs
    </template>
    <template #subHeader>
      Multi content in single area
    </template>
    <template #default>
      <!-- Color Selector -->
      <t-component-style-selector :select-data="selectData" v-model="selectedData" class="mb-4" />
      <grid-section :col-tablet="2">
        <!--Style 1-->
        <t-tab :data="tab1content" v-model="tab1" :color="selectedData.color" :design="selectedData.design"
               :colored-text="selectedData.coloredText">
          <template #icon="{props}">
            <svg v-if="props.id===2" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
            </svg>
            <svg v-if="props.id===3" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
          </template>
          <template #content="{props}">
            <span v-if="props.id===1">
              Laravel is a web application framework with expressive, elegant syntax. <br/><h4 class='mt-1 font-semibold'>Rich Html Content</h4><p>Laravel attempts to take the pain out of development by easing common tasks used in most web projects. </p>
            </span>
          </template>
        </t-tab>
        <!--Style 2-->
        <t-tab :data="tab2content" v-model="tab2" :color="selectedData.color" :design="selectedData.design"
               :colored-text="selectedData.coloredText" dark-mode
               :radius="5" />
      </grid-section>
    </template>
  </app-layout>
</template>

<script>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TTab from "@/Components/Tab/TTab.vue";
import TComponentStyleSelector from "@/Components/Misc/TComponentStyleSelector.vue";

export default {
  name: "Tab",
  components: { TComponentStyleSelector, AppLayout, GridSection, TTab },
  data() {
    return {
      tab1: 1,
      tab2: 1,
      tab1content: [
        {
          id: 1,
          title: "Laravel",
          content: ""
        },
        { id: 2, title: "Vuejs", content: "The Progressive JavaScript Framework." },
        {
          id: 3,
          title: "",
          content: "A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup."
        }
      ],
      tab2content: [
        {
          id: 1,
          title: "Tailadmin",
          content: "It's a dashboard theme/UI-Starter Kit with Laravel, Inertia and Vue (JetStream)."
        },
        { id: 2, title: "Laraquality", content: "Online quality assurance(QA) management system" },
        { id: 3, title: "TailCoin", content: "Simple crypto wallet track system" }
      ],
      selectedData: {
        color: "blue",
        design: "filled",
        coloredText: false
      },
      selectData: [
        {
          label: "Design",
          key: "design",
          options: [
            { key: "filled", label: "Filled" },
            { key: "underline", label: "Underline" }
          ]
        },
        {
          label: "Colored Text",
          key: "coloredText",
          options: [
            { key: false, label: "Simple Text" },
            { key: true, label: "Colored Text" }
          ]
        }
      ]
    };
  }
};
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Components/Table.vue
================================================
<template>
  <app-layout>
    <!--Header-->
    <template #header>
      Tables
    </template>
    <!--Subheader-->
    <template #subHeader>
      Customizable tables
    </template>
    <!--Content-->
    <template #default>
      <t-table
        :content="users"
        :header="tableHeader"
        :features="tableFeatures"
      >
        <template #search>
          <grid-section :col="12" :gap="2">
            <!--Name-->
            <t-input-group class="col-span-12 md:col-span-6" label="Name">
              <t-input-text id="name" />
            </t-input-group>
            <!--Email-->
            <t-input-group class="col-span-12 md:col-span-6" label="Email">
              <t-input-text id="email" />
            </t-input-group>
          </grid-section>
        </template>
        <template #right>
          <t-button :link="route('form-structure')" :radius="8">
            <t-user-circle-icon class="w-6 h-6" />
            Add New User
          </t-button>
        </template>
        <template #photo="{props}">
          <t-avatar :link="props.photo" :radius="8" :size="3" />
        </template>
      </t-table>
    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import TTable from "@/Components/Table/TTable.vue";
import TAvatar from "@/Components/Avatar/TAvatar.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import GridSection from "@/Layouts/GridSection.vue";
import TButton from "@/Components/Button/TButton.vue";
import TUserCircleIcon from "@/Components/Icon/TUserCircleIcon.vue";
import { reactive } from "vue";

import SshPre from "simple-syntax-highlighter";
import "simple-syntax-highlighter/dist/sshpre.css";

export default {
  name: "Table",
  components: {
    TUserCircleIcon, TButton, GridSection, TInputText, TInputGroup, AppLayout, TTable, TAvatar, SshPre
  },
  props: ["users"],
  setup() {
    /*Table States*/
    const tableHeader = reactive([
      { label: "Avatar", key: "photo", align: "center", width: "5", status: true },
      { label: "Name", key: "name", align: "left", simpleSearchable:true, status: true, sortable: true },
      { label: "Email", key: "email", align: "left", status: true, sortable: true }
    ]);
    const tableFeatures = reactive({
      table: {
        design: "elegant",
        seperatedRow: true,
        rowBorder: true,
        zebraRow: true,
        radius: 3,
        perPage: 5
      },
      pagination: {
        status: true,
        radius: 3,
        range: 5,
        jump: true,
      },
      actions: {
        status: true,
        headerText: "Aksiyonlar"
      },
      deleteModal: {
        headerText: "Item's deleting",
        contentText: "You are going to delete <br><b></b><br>Are you sure ?",
        icon: "warning"
      }
    });

    return { tableHeader, tableFeatures };
  }
};
</script>


================================================
FILE: resources/js/Pages/Samples/Components/Toastr.vue
================================================
<template>
    <app-layout>
        <template #header>Toaster Notifications</template>
        <template #subHeader>Elegant and simple notifications bubbles</template>
        <template #default>
            <t-form-content>
                <t-form-section
                    description="You can customize toaster notfication to demo"
                    title="Toaster Customizer"
                >
                    <t-input-group label-for="timer" label="Timer" class="col-span-12 md:col-span-6">
                        <t-input-text id="timer" placeholder="3000"/>
                    </t-input-group>
                    <t-input-group label-for="timer" label="Timer" class="col-span-12 md:col-span-6">
                        <t-input-select>
                            <t-input-select-item v-for="item in colorOptions" :key="item.key">

                            </t-input-select-item>
                        </t-input-select>
                    </t-input-group>
                </t-form-section>
            </t-form-content>
        </template>
    </app-layout>
</template>

<script>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import TFormSection from "@/Components/Form/TFormSection.vue";
import TFormContent from "@/Components/Form/TFormContent.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import TInputSelect from "@/Components/Form/Inputs/TInputSelect.vue";

export default {
    name: "Toaster",
    components: {
        TInputSelect,
        TInputText,
        TInputGroup,
        TFormContent, TFormSection, AppLayout},
    data() {
        return {
            colorOptions : {
                'red': {
                    label: 'Red',
                    alertStyle: "bg-red-200 border-red-500 text-red-700 shadow-sm"
                },
                'blue': {
                    label: 'Blue',
                    alertStyle: "bg-blue-200 border-blue-500 text-blue-700 shadow-sm"
                },
                'green': {
                    label: 'Green',
                    alertStyle: "bg-green-200 border-green-500 text-green-700 shadow-sm"
                },
                'yellow': {
                    label: 'Yellow',
                    alertStyle: "bg-yellow-200 border-yellow-500 text-yellow-700 shadow-sm"
                },
                'indigo': {
                    label: 'Indigo',
                    alertStyle: "bg-indigo-200 border-indigo-500 text-indigo-700 shadow-sm"
                },
                'purple': {
                    label: 'Purple',
                    alertStyle: "bg-purple-200 border-purple-500 text-purple-700 shadow-sm"
                },
                'pink': {
                    label: 'Pink',
                    alertStyle: "bg-pink-200 border-pink-500 text-pink-700 shadow-sm"
                },
                'white': {
                    label: 'White',
                    alertStyle: "bg-white border-gray-300 shadow-sm"
                },
                'gray': {
                    label: 'Gray',
                    alertStyle: "bg-gray-200 border-gray-500 text-gray-700 shadow-sm"
                },
                'black': {
                    label: 'Black',
                    alertStyle: "bg-gray-700 border-black text-gray-200 shadow-sm"
                },
            }
        }
    },
    methods: {
        toastAlert() {
            this.$page.props.flash.toastr = {
                color: 'red',
                position: '',
                closeable: true,
                timer: 6000,
                content: 'Selam ben bir uyarı kutusuyum'
            }
        }
    }
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Components/Tooltip.vue
================================================
<template>
    <app-layout>
        <template #header>Tooltips</template>
        <template #subHeader>Smart and fast infos in the line</template>
        <template #default>
            <grid-section :col="1" :gap="4">
                <t-content-card :width="1">
                    <template #title>Simple</template>
                    <template #subTitle>Left, Top, Right and Bottom Positions</template>
                    <template #content>
                        <div class="flex flex-wrap space-x-8 dark:text-slate-100 mt-8">
                            <t-tooltip position="top">
                                Click me - Top
                                <template #boxContent>Hello, I'm at the top</template>
                            </t-tooltip>
                            <t-tooltip position="bottom" :border="false">
                                Click me - Bottom
                                <template #boxContent>Hello, I'm at the bottom</template>
                            </t-tooltip>
                            <t-tooltip position="left">
                                Click me - Left
                                <template #boxContent>Hello, I'm at the left</template>
                            </t-tooltip>
                            <t-tooltip position="right" :border="false">
                                Click me - Right
                                <template #boxContent>Hello, I'm at the right</template>
                            </t-tooltip>
                        </div>
                    </template>
                </t-content-card>
            </grid-section>
        </template>
    </app-layout>
</template>

<script>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";
import TTooltip from "@/Components/Tooltip/TTooltip.vue";

export default {
    name: "Tooltip",
    components: {AppLayout, GridSection, TContentCard, TTooltip},
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Examples/Auth/ForgotPassword.vue
================================================
<template>
    <t-forgot
        :status="status"
    >
        <!--Logo-->
        <template #logo>
            <Link href="/">
                <div class="flex flex-col justify-center items-center w-full">
                    <t-logo class="w-12 h-12"/>
                    <span class="text-3xl">TailAdmin</span>
                </div>
            </Link>
        </template>
        <!--Greeting-->
        <template #greeting>
            <b>{{ t('forgotPasswordGreeting') }}</b>
        </template>
        <!--Greeting Sub-->
        <template #subGreeting>
            {{ t('forgotPasswordSubGreeting') }}
        </template>
    </t-forgot>
</template>

<script setup>
import {Link} from "@inertiajs/vue3";
import TForgot from "@/Components/Auth/TForgot.vue";
import TLogo from "@/Components/Icon/TLogo.vue";

/* Multi-language */
import { useI18n } from "vue-i18n";
import {authTranslates} from "@/Lang/languages";
const {t, tm} = useI18n({
    inheritLocale: true,
    messages: authTranslates,
});
</script>


================================================
FILE: resources/js/Pages/Samples/Examples/Auth/Lock.vue
================================================
<template>
    <t-lock/>
</template>

<script>
import TLock from "@/Components/Auth/TLock.vue";

export default {
    components: {TLock}
}
</script>


================================================
FILE: resources/js/Pages/Samples/Examples/Auth/Login.vue
================================================
<template>
    <t-login
        :canResetPassword="canResetPassword"
        :status="status"
    >
        <!--Logo-->
        <template #logo>
            <Link href="/">
                <div class="flex flex-col justify-center items-center w-full">
                    <t-logo class="w-12 h-12"/>
                    <span class="text-3xl">TailAdmin</span>
                </div>
            </Link>
        </template>
        <!--Greeting-->
        <template #greeting>
            {{ t('loginGreeting') }}
        </template>
    </t-login>
</template>

<script setup>
import {Link} from "@inertiajs/vue3";
import TLogin from "@/Components/Auth/TLogin.vue";
import TLogo from "@/Components/Icon/TLogo.vue";

defineProps({
    canResetPassword: Boolean,
    status: String
});

/* Multi-language */
import { useI18n } from "vue-i18n";
import {authTranslates} from "@/Lang/languages";
const { t } = useI18n({
    inheritLocale: true,
    messages: authTranslates,
});
</script>


================================================
FILE: resources/js/Pages/Samples/Examples/Auth/Register.vue
================================================
x
<template>
    <t-register
        :status="status"
        :privacyPolicyFeature="true"
        termsLink="terms"
        policyLink="privacy-policy"
    >
        <!--Logo-->
        <template #logo>
            <Link href="/">
                <div class="flex flex-col justify-center items-center w-full">
                    <t-logo class="w-12 h-12"/>
                    <span class="text-3xl">TailAdmin</span>
                </div>
            </Link>
        </template>
        <!--Greeting-->
        <template #greeting>
            {{ t('registerGreeting') }}
        </template>
    </t-register>
</template>

<script  setup>
import {Link} from "@inertiajs/vue3";
import TLogo from "@/Components/Icon/TLogo.vue";
import TRegister from "@/Components/Auth/TRegister.vue";

/* Multi-language */
import { useI18n } from "vue-i18n";
import {authTranslates} from "@/Lang/languages";
const { t } = useI18n({
    inheritLocale: true,
    messages: authTranslates,
});
</script>


================================================
FILE: resources/js/Pages/Samples/Examples/ChatApp.vue
================================================
<template>
  <app-layout>
    <template #header>Chat Application Page</template>
    <template #subHeader></template>
    <template #default>

    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";

export default {
  name: "ChatApp",
  components: {AppLayout}
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Examples/EmailApp.vue
================================================
<template>
  <app-layout>
    <template #header>Email Application Page</template>
    <template #subHeader></template>
    <template #default>

    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";

export default {
  name: "EmailApp",
  components: {AppLayout}
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Examples/ForgotPassword.vue
================================================
<template>
    <app-layout :title="t('pageTitle')">
        <template #header>{{ t('pageTitle') }}</template>
        <template #subHeader>{{ t('pageSubTitle') }}</template>
        <template #default>
        <grid-section :col-tablet="3">
            <!--Demo-->
            <div class="flex flex-col gap-2">
                <img :src="'/img/demo/forgot_1_gradient.jpg'" class="rounded-md" alt="Forgot Password Screen">
                <t-button type="link" :link="route('forgot-password-app-demo')" :radius="3" color="pink" size="full">
                    {{ t('goToDemo') }}
                </t-button>
            </div>
        </grid-section>
        </template>
    </app-layout>
</template>

<script setup>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TButton from "@/Components/Button/TButton.vue";

/* Multi-language */
import { useI18n } from "vue-i18n";

/* Multi-language */
const { t } = useI18n({
    inheritLocale: true,
    messages: {
        bg: {
            pageTitle: 'Екран за Забравена Парола',
            pageSubTitle: 'Трябва да направите промени в Resources/Js/Pages/Auth/ForgotPassword.vue',
            goToDemo: 'Вижте Демо Забравена Парола',
        },
        de: {
            pageTitle: 'Passwort vergessen Bildschirm',
            pageSubTitle: 'Sie sollten Änderungen an Resources/Js/Pages/Auth/ForgotPassword.vue vornehmen',
            goToDemo: 'Demo Passwort vergessen anzeigen',
        },
        en: {
            pageTitle: 'Forgot Password Screen',
            pageSubTitle: 'You should make to changes in the Resources/Js/Pages/Auth/ForgotPassword.vue',
            goToDemo: 'See Demo Forgot Password',
        },
        fr: {
            pageTitle: 'Écran Mot de passe oublié',
            pageSubTitle: "Vous devez apporter des modifications dans Resources/Js/Pages/Auth/ForgotPassword.vue",
            goToDemo: "Voir la démo Mot de passe oublié",
        },
        ru: {
            pageTitle: 'Экран Забытого Пароля',
            pageSubTitle: 'Вы должны внести изменения в Resources/Js/Pages/Auth/ForgotPassword.vue',
            goToDemo: 'Посмотреть демо Забытого Пароля',
        },
        tr: {
            pageTitle: 'Şifreyi Unuttum Ekranı',
            pageSubTitle: 'Resources/Js/Pages/Auth/ForgotPassword.vue dosyasında değişiklik yapmalısınız',
            goToDemo: 'Şifreyi Unuttum Demoyu Gör',
        },
        zh: {
            pageTitle: '忘记密码屏幕',
            pageSubTitle: '您应该在Resources/Js/Pages/Auth/ForgotPassword.vue中进行更改',
            goToDemo: '查看忘记密码演示',
        },
    },
});
</script>


================================================
FILE: resources/js/Pages/Samples/Examples/Lock.vue
================================================
<template>
    <app-layout :title="t('pageTitle')">
        <template #header>{{ t('pageTitle') }}</template>
        <template #subHeader>{{ t('pageSubTitle') }}</template>
        <template #default>
            <grid-section :col-tablet="3">
                <!--Demo-->
                <div class="flex flex-col gap-2">
                    <img :src="'/img/demo/lock_1_gradient.jpg'" class="rounded-md" alt="Lock Screen Photo">
                    <t-button type="link" :link="route('lock-app-demo')" :radius="3" color="pink" size="full">
                        {{ t('goToDemo') }}
                    </t-button>
                </div>
            </grid-section>
        </template>
    </app-layout>
</template>

<script setup>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TButton from "@/Components/Button/TButton.vue";

/* Multi-language */
import { useI18n } from "vue-i18n";

/* Multi-language */
const { t } = useI18n({
    inheritLocale: true,
    messages: {
        bg: {
            pageTitle: 'Екран за Заключване',
            pageSubTitle: 'Само примерен екран, това не е активен модул',
            goToDemo: 'Вижте Демо Заключване',
        },
        de: {
            pageTitle: 'Sperrbildschirm',
            pageSubTitle: 'Nur Beispielbildschirm, es ist kein aktives Modul',
            goToDemo: 'Demo-Sperre anzeigen',
        },
        en: {
            pageTitle: 'Lock Screen',
            pageSubTitle: 'Only sample screen, it\'s not active module',
            goToDemo: 'See Demo Lock',
        },
        fr: {
            pageTitle: 'Écran de verrouillage',
            pageSubTitle: 'Seulement un écran d\'exemple, ce n\'est pas un module actif',
            goToDemo: 'Voir la démo de verrouillage',
        },
        ru: {
            pageTitle: 'Экран Блокировки',
            pageSubTitle: 'Только пример экрана, это не активный модуль',
            goToDemo: 'Посмотреть демо Блокировки',
        },
        tr: {
            pageTitle: 'Kilit Ekranı',
            pageSubTitle: 'Sadece örnek ekran, bu aktif bir modül değil',
            goToDemo: 'Demo Kilitleme Ekranını Gör',
        },
        zh: {
            pageTitle: '锁屏',
            pageSubTitle: '仅示例屏幕，未激活模块',
            goToDemo: '查看锁屏演示',
        },
    },
});
</script>


================================================
FILE: resources/js/Pages/Samples/Examples/Login.vue
================================================
<template>
    <app-layout :title="t('pageTitle')">
    <template #header>{{ t('pageTitle') }}</template>
    <template #subHeader>{{ t('pageSubTitle') }}</template>
    <template #default>
        <grid-section :col-tablet="3">
                <!--Demo-->
                <div class="flex flex-col gap-2">
                <img :src="'/img/demo/login_1_gradient.jpg'" class="rounded-md" alt="Login Screen">
                <t-button type="link" :link="route('login-app-demo')" :radius="3" color="pink" size="full">
                    {{ t('goToDemo') }}
                </t-button>
            </div>
        </grid-section>
    </template>
    </app-layout>
</template>

<script setup>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TButton from "@/Components/Button/TButton.vue";

/* Multi-language */
import { useI18n } from "vue-i18n";

/* Multi-language */
const { t } = useI18n({
    inheritLocale: true,
    messages: {
        bg: {
            pageTitle: 'Екран за Вход',
            pageSubTitle: 'Трябва да направите промени в Resources/Js/Pages/Auth/Login.vue',
            goToDemo: 'Вижте Демо Вход',
        },
        de: {
            pageTitle: 'Anmeldebildschirm',
            pageSubTitle: 'Sie sollten Änderungen in Resources/Js/Pages/Auth/Login.vue vornehmen',
            goToDemo: 'Demo-Anmeldung anzeigen',
        },
        en: {
            pageTitle: 'Login Screen',
            pageSubTitle: 'You should make to changes in the Resources/Js/Pages/Auth/Login.vue',
            goToDemo: 'See Demo Login',
        },
        fr: {
            pageTitle: "Écran d'authentification",
            pageSubTitle: "Vous devez apporter des modifications dans Resources/Js/Pages/Auth/Login.vue",
            goToDemo: "Voir la démo de connexion",
        },
        ru: {
            pageTitle: 'Экран Входа',
            pageSubTitle: 'Вы должны внести изменения в Resources/Js/Pages/Auth/Login.vue',
            goToDemo: 'Посмотреть демо Вход',
        },
        tr: {
            pageTitle: 'Giriş Ekranı',
            pageSubTitle: 'Resources/Js/Pages/Auth/Login.vue dosyasında değişiklik yapmalısınız',
            goToDemo: 'Demo Giriş Ekranını Gör',
        },
        zh: {
            pageTitle: '登录界面',
            pageSubTitle: '您应该在 Resources/Js/Pages/Auth/Login.vue 中进行更改',
            goToDemo: '查看演示登录',
        },
    },
});
</script>


================================================
FILE: resources/js/Pages/Samples/Examples/Pricing.vue
================================================
<template>
  <app-layout>
    <template #header>Pricing Page</template>
    <template #subHeader></template>
    <template #default>

    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";

export default {
  name: "Pricing",
  components: {AppLayout}
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Examples/Profile.vue
================================================
<template>
  <app-layout>
    <template #header>Profile Page</template>
    <template #subHeader>User page</template>
    <template #default>

    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";

export default {
  name: "Profile",
  components: {AppLayout}
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Examples/ProjectApp.vue
================================================
<template>
  <app-layout>
    <template #header>Project Application Page</template>
    <template #subHeader></template>
    <template #default>

    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";

export default {
  name: "ProjectApp",
  components: {AppLayout}
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Examples/Register.vue
================================================
<template>
    <app-layout :title="t('pageTitle')">
        <template #header>{{ t('pageTitle') }}</template>
        <template #subHeader>{{ t('pageSubTitle') }}</template>
        <template #default>
        <grid-section :col-tablet="3">
            <!--Demo-->
            <div class="flex flex-col gap-2">
                <img :src="'/img/demo/register_1_gradient.jpg'" class="rounded-md" alt="Register Screen">
                <t-button type="link" :link="route('register-app-demo')" :radius="3" color="pink" size="full">
                    {{ t('goToDemo') }}
                </t-button>
            </div>
        </grid-section>
        </template>
    </app-layout>
</template>

<script setup>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TButton from "@/Components/Button/TButton.vue";

/* Multi-language */
import { useI18n } from "vue-i18n";

/* Multi-language */
const { t } = useI18n({
    inheritLocale: true,
    messages: {
        bg: {
            pageTitle: 'Екран за Регистрация',
            pageSubTitle: 'Трябва да направите промени в Resources/Js/Pages/Auth/Register.vue',
            goToDemo: 'Вижте Демо Регистрация',
        },
        de: {
            pageTitle: 'Registrierungsbildschirm',
            pageSubTitle: 'Sie sollten Änderungen an Resources/Js/Pages/Auth/Register.vue vornehmen',
            goToDemo: 'Demo-Registrierung anzeigen',
        },
        en: {
            pageTitle: 'Register Screen',
            pageSubTitle: 'You should make to changes in the Resources/Js/Pages/Auth/Register.vue',
            goToDemo: 'See Demo Register',
        },
        fr: {
            pageTitle: "Écran d'inscription",
            pageSubTitle: "Vous devez apporter des modifications dans Resources/Js/Pages/Auth/Register.vue",
            goToDemo: "Voir la démo d'inscription",
        },
        ru: {
            pageTitle: 'Экран Регистрации',
            pageSubTitle: 'Вы должны внести изменения в Resources/Js/Pages/Auth/Register.vue',
            goToDemo: 'Посмотреть демо Регистрация',
        },
        tr: {
            pageTitle: 'Kayıt Ekranı',
            pageSubTitle: 'Resources/Js/Pages/Auth/Register.vue dosyasında değişiklik yapmalısınız',
            goToDemo: 'Demo Kayıt Ekranını Gör',
        },
        zh: {
            pageTitle: '注册界面',
            pageSubTitle: '您应该在 Resources/Js/Pages/Auth/Register.vue 中进行更改',
            goToDemo: '查看演示注册',
        },
    },
});
</script>


================================================
FILE: resources/js/Pages/Samples/Examples/TodoApp.vue
================================================
<template>
  <app-layout>
    <template #header>TO-DO Application</template>
    <template #subHeader></template>
    <template #default>

    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";

export default {
  name: "TodoApp",
  components: {AppLayout}
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/FormElements/DateField.vue
================================================
<template>
    <app-layout>
        <template #header>Date Input Field</template>
        <template #subHeader>Starting, birth, fired, register date or time</template>
        <template #default>
            <t-form-content @reset="reset" @submitted="save">
                <t-form-section
                    description="This information is subject to personal data protection law."
                    title="Personal Infos"
                >
                    <!-- Name -->
                    <t-input-group class="col-span-12" label="Name" labelFor="name">
                        <t-input-text
                            id="name"
                            v-model="form.name"
                            placeholder="Business mail address"
                        />
                    </t-input-group>
                    <!-- Birthday -->
                    <t-input-group
                        class="col-span-12"
                        label="Birthday (Only Date)"
                        labelFor="tax_id"
                    >
                        <t-input-date v-model="form.birth_date" />
                    </t-input-group>
                    <!-- Flying Date-Time -->
                    <t-input-group
                        class="col-span-12"
                        label="Flying Date-Time"
                        labelFor="flying_time"
                    >
                        <t-input-date v-model="form.flying_time" mode="dateTime" />
                    </t-input-group>
                    <!-- Meeting Time A-->
                    <t-input-group
                        class="col-span-12"
                        label="Meeting Time (Hour:Minute A)"
                        labelFor="meeting_time"
                    >
                        <t-input-date v-model="form.meeting_time" mode="time" />
                    </t-input-group>
                    <!-- Meeting Time 24Hr-->
                    <t-input-group
                        class="col-span-12"
                        label="Meeting Time (Hour:Minute 24Hr)"
                        labelFor="meeting_time"
                    >
                        <t-input-date v-model="form.meeting_time" :is24hr="true" mode="time" />
                    </t-input-group>
                    <!-- Meeting Duration-->
                    <t-input-group
                        class="col-span-12"
                        label="Meeting Duration (Date Range)"
                        labelFor="meeting_time"
                    >
                        <t-input-date v-model="form.meeting_duration" :is-range="true" />
                    </t-input-group>
                </t-form-section>
            </t-form-content>
        </template>
    </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import TFormContent from "@/Components/Form/TFormContent.vue";
import TFormSection from "@/Components/Form/TFormSection.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import TInputDate from "@/Components/Form/Inputs/TInputDate.vue";

export default {
    name: "DateField",
    components: { TInputDate, TInputText, TInputGroup, TFormSection, TFormContent, AppLayout },
    data() {
        return {
            form: this.$inertia.form({
                _method: 'POST',
                name: null,
                birth_date: null,
                flying_time: null,
                meeting_time: null,
                meeting_duration: null
            })
        }
    },
    methods: {
        reset: function () {
            this.form.name = null;
            this.form.birth_date = null;
            this.form.flying_time = null;
            this.form.meeting_time = null;
            this.form.meeting_duration = null;
        },
        save() {
            this.form.post(route('user.store'), {
                errorBag: 'user',
                preserveScroll: true,
            });
            this.loading = true;
        }
    },
}
</script>

<style scoped>
</style>


================================================
FILE: resources/js/Pages/Samples/FormElements/FormStructure.vue
================================================
<template>
    <app-layout :actionButtons="true">
        <template #header>Form Structure</template>
        <template #action-buttons>
            <t-button :radius="3" color="yellow">
                <icon icon="angle-left" />Back to Home
            </t-button>
            <t-button :radius="3" color="green">
                <icon icon="plus-circle" />Add New
            </t-button>
        </template>
        <template #default>
            <!-- Native -->
            <t-form-content
                :reset-button="false"
                :submit-button="false"
                @reset="reset"
                @submitted="save"
            >
                <!--Form Content Area Indicator-->
                <t-badge color="success">Form Content Area</t-badge>

                <t-form-section
                    description="This information is subject to personal data protection law. - (Description)"
                    title="Personal Infos - (Title)"
                >
                    <!--Form Section Area Indicator-->
                    <div class="col-span-full">
                        <t-badge color="info">Form Section Area</t-badge>
                    </div>

                    <!-- Name -->
                    <t-input-group label="Name" labelFor="name">
                        <t-input-text
                            id="name"
                            v-model="form.name"
                            placeholder="Business mail address"
                        />
                    </t-input-group>
                    <!-- Tax ID -->
                    <t-input-group label="Tax ID" labelFor="tax_id">
                        <t-input-text id="tax_id" v-model="form.tax_id" />
                    </t-input-group>
                    <!-- Address -->
                    <t-input-group :laptop-width="12" label="Address" labelFor="address">
                        <t-input-text-area
                            id="address"
                            v-model="form.address"
                            :clear-button="true"
                            :counter="true"
                            :rows="3"
                            placeholder="Full address"
                        />
                    </t-input-group>
                </t-form-section>
                <!--Status Area Indicator-->
                <template #button-area>
                    <div
                        class="flex flex-wrap col-span-12 justify-center md:justify-end space-x-2 mr-4 py-4"
                    >
                        <t-badge color="pink">Form Extra Button Area</t-badge>
                    </div>
                    <div class="border p-2 gap-2 inline-flex items-center">
                        <div class="flex flex-wrap gap-1 justify-center md:justify-end">
                            <t-badge color="light">Form Status Area</t-badge>or
                            <t-badge color="purple">Default Form Buttons Area</t-badge>
                        </div>
                    </div>
                </template>
            </t-form-content>

            <!-- Smart -->
            <t-form-content
                :reset-button="true"
                :submit-button="true"
                sectionLayout="smart"
                @reset="reset"
                @submitted="save"
                class="mt-4"
            >
                <t-form-section
                    description="This information is subject to personal data protection law. - (Description)"
                    title="Personal Infos - (Title)"
                >
                    <!-- Name -->
                    <t-input-group label="Name" labelFor="name">
                        <t-input-text
                            id="name"
                            v-model="form.name"
                            placeholder="Business mail address"
                        />
                    </t-input-group>
                    <!-- Tax ID -->
                    <t-input-group label="Tax ID" labelFor="tax_id">
                        <t-input-text id="tax_id" v-model="form.tax_id" />
                    </t-input-group>
                    <!-- Address -->
                    <t-input-group :desktop-width="12" label="Address" labelFor="address">
                        <t-input-text-area
                            id="address"
                            v-model="form.address"
                            :clear-button="true"
                            :counter="true"
                            :rows="3"
                            placeholder="Full address"
                        />
                    </t-input-group>
                </t-form-section>

                <t-form-section
                    description="This information is subject to personal data protection law. - (Description)"
                    title="Personal Infos - (Title)"
                >
                    <!-- Name -->
                    <t-input-group label="Name" labelFor="name">
                        <t-input-text
                            id="name"
                            v-model="form.name"
                            placeholder="Business mail address"
                        />
                    </t-input-group>
                    <!-- Tax ID -->
                    <t-input-group label="Tax ID" labelFor="tax_id">
                        <t-input-text id="tax_id" v-model="form.tax_id" />
                    </t-input-group>
                    <!-- Address -->
                    <t-input-group :desktop-width="12" label="Address" labelFor="address">
                        <t-input-text-area
                            id="address"
                            v-model="form.address"
                            :clear-button="true"
                            :counter="true"
                            :rows="3"
                            placeholder="Full address"
                        />
                    </t-input-group>
                </t-form-section>

                <template #actions>Saved</template>
            </t-form-content>
        </template>
    </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import TButton from "@/Components/Button/TButton.vue";
import TFormSection from "@/Components/Form/TFormSection.vue";
import TFormContent from "@/Components/Form/TFormContent.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import TInputTextArea from "@/Components/Form/Inputs/TInputTextArea.vue";
import TBadge from "@/Components/Badge/TBadge.vue";

export default {
    name: "FormStructure",
    components: {
        TBadge,
        AppLayout,
        TButton,
        TFormSection,
        TFormContent,
        TInputGroup,
        TInputText,
        TInputTextArea,
    },
    data() {
        return {
            loading: false,
            form: this.$inertia.form({
                _method: 'POST',
                name: null,
                tax_id: null,
                email: null,
                phone: null,
                status: null,
                address: null,
            }),
            status: [
                { name: 'Passive', value: 0, icon: 'XIcon', class: 'w-5 h-5 text-red-500 mr-2' },
                { name: 'Active', value: 1, icon: 'Checked', class: 'w-5 h-5 text-green-500 mr-2' }
            ],
        };
    },
    methods: {
        reset: function () {
            this.form.name = null;
            this.form.tax_id = null;
            this.form.email = null;
            this.form.phone = null;
            this.form.status = null;
            this.form.address = null;
        },
        save() {
            this.form.post(route('customer.store'), {
                errorBag: 'customer',
                preserveScroll: true,
            });
            this.loading = true;
        }
    }
}
</script>

<style scoped>
</style>





























================================================
FILE: resources/js/Pages/Samples/FormElements/InlineRepeatableField.vue
================================================
<template>
  <app-layout>
    <template #header>Inline Editable and Repeatable Input Type</template>
    <template #subHeader>One field but every things is in there</template>
    <template #default>
      <t-form-content @reset="reset" @submitted="save">
        <t-form-section
            description="This information is subject to personal data protection law."
            title="Personal Infos">
          <!-- Name -->
          <t-input-group class="col-span-12" label="Name" labelFor="name">
            <t-input-text id="name" v-model="form.name" placeholder="Business mail address"/>
          </t-input-group>
          <!-- Job Requirements -->
          <t-input-group class="col-span-12" label="Job Requirements" labelFor="job_requirements">
            <t-input-inline-editable-repeatable
                id="job_requirements"
                v-model="form.job_requirements"
                place-holder-text="Requirement"
            />
          </t-input-group>
        </t-form-section>
      </t-form-content>
    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import TFormContent from "@/Components/Form/TFormContent.vue";
import TFormSection from "@/Components/Form/TFormSection.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import TInputInlineEditableRepeatable from "@/Components/Form/Inputs/TInputInlineEditableRepeatable.vue";


export default {
  name: "InlineRepeatableField",
  components: {
    TInputInlineEditableRepeatable, TInputText, TInputGroup, TFormSection, TFormContent, AppLayout
  },
  data() {
    return {
      form: this.$inertia.form({
        _method: 'POST',
        name: null,
        job_requirements: [],
      })
    }
  },
  methods: {
    reset: function () {
      this.form.name = null;
      this.form.job_requirements = [];
    },
    save() {
      this.form.post(route('user.store'), {
        errorBag: 'user',
        preserveScroll: true,
      });
      this.loading = true;
    }
  },
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/FormElements/InputGroup.vue
================================================
<template>
  <app-layout>
    <template #header>
      Input Group
    </template>
    <template #default>
      <grid-section :col-tablet="2" :col-desktop="4">
        <content-card :radius="3" :width="1">
          <template #title>
            With Label Prop
          </template>
          <template #content>
            <t-input-group label="Text Label" label-for="name1">
              <t-input-text id="name1" placeholder="I'm a placeholder text"/>
            </t-input-group>
          </template>
        </content-card>

        <content-card :radius="3" :width="1">
          <template #title>
            With Label Slot
          </template>
          <template #content>
            <t-input-group label-for="name2" sub-label="Cash only">
              <template slot="label">
                <t-cash-icon class="w-5 h-5 mr-1"/> Label Slot
              </template>
              <t-input-text id="name2" placeholder="I'm a placeholder text"/>
            </t-input-group>
          </template>
        </content-card>

        <content-card :radius="3" :width="1">
          <template #title>
            With Colorful Sub Label
          </template>
          <template #content>
            <t-input-group label="Text Label" label-for="name3" sub-label="Cash only" sub-label-color="solid-green">
              <t-input-text id="name3" placeholder="I'm a placeholder text"/>
            </t-input-group>
          </template>
        </content-card>

        <content-card :radius="3" :width="1">
          <template #title>
            With Error Message
          </template>
          <template #content>
            <t-input-group error="Please enter numerical value" label="Text Label" label-for="name4" sub-label="Cash only"
                           sub-label-color="solid-yellow">
              <t-input-text id="name4" placeholder="I'm a placeholder text" value="Hi, I'm a prefilled text"/>
            </t-input-group>
          </template>
        </content-card>
      </grid-section>
    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import ContentCard from "@/Components/Card/TContentCard.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import GridSection from "@/Layouts/GridSection.vue";
import TCashIcon from "@/Components/Icon/TCashIcon.vue";

export default {
  name: "InputGroup",
  components: {TCashIcon, AppLayout, ContentCard, GridSection, TInputGroup, TInputText},
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/FormElements/MultiSelectInput.vue
================================================
<template>
    <app-layout title="Multi Select Input Component">
        <template #header>
            Multi Select Input Component
        </template>
        <template #action-buttons>
            <t-button :radius="3" color="yellow">
                <icon icon="angle-left"/>
                Back to Home
            </t-button>
            <t-button :radius="3" color="green">
                <icon icon="plus-circle"/>
                Add New
            </t-button>
        </template>
        <template #default>
            <t-form-content @reset="reset">
                <t-form-section
                    description="This information is subject to personal data protection law."
                    title="Personal Infos">
                    <!-- Manager - Simple -->
                    <t-input-group
                        class="col-span-12 md:col-span-6"
                        label="Managers - Simple"
                        labelFor="manager"
                    >
                        <t-input-multi-select
                            id="managers"
                            v-model="form.managers"
                            :options="users"
                            options-label-key="name"
                            options-value-key="id"
                        />
                    </t-input-group>
                    <!-- Facilities - Rich Options Content -->
                    <t-input-group
                        class="col-span-12 md:col-span-6"
                        label="Facilities - Rich Options Content"
                        label-for="facilities"
                    >
                        <t-input-multi-select
                            id="facilities"
                            v-model="form.facilities"
                            :search="false"
                            :options="facilities"
                            options-label-key="name"
                            options-value-key="value"
                        >
                            <template #label="{ props }">
                                <div class="flex items-center space-x-1">
                                    <!--Computer-->
                                    <svg v-if="props.value === 'computer'" class="w-4 h-4" fill="none"
                                         stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                    </svg>
                                    <!--Phone-->
                                    <svg v-if="props.value === 'phone'" class="w-4 h-4" fill="none"
                                         stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                    </svg>
                                    <!--Lodge-->
                                    <svg v-if="props.value === 'lodge'" class="w-4 h-4" fill="none"
                                         stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                    </svg>
                                    <!--Personal Office-->
                                    <svg v-if="props.value === 'personal-office'" class="w-4 h-4" fill="none"
                                         stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                    </svg>
                                    <!--Shared Office-->
                                    <svg v-if="props.value === 'shared-office'" class="w-4 h-4" fill="none"
                                         stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                    </svg>
                                    <span v-text="props.name"/>
                                </div>
                            </template>
                        </t-input-multi-select>
                    </t-input-group>
                    <!--Disabled-->
                    <t-input-group
                        class="col-span-12 md:col-span-6"
                        label="Disabled"
                        label-for="disabled"
                    >
                        <t-input-multi-select
                            id="disabled"
                            :options="users"
                            disabled
                        />
                    </t-input-group>
                    <!--Read Only-->
                    <t-input-group
                        class="col-span-12 md:col-span-6"
                        label="Read Only"
                        label-for="readOnly"
                    >
                        <t-input-multi-select
                            id="readOnly"
                            :options="users"
                            options-value-key="id"
                            options-label-key="name"
                            :model-value="[1,2,3]"
                            read-only
                        />
                    </t-input-group>
                </t-form-section>
            </t-form-content>
        </template>
    </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import TButton from "@/Components/Button/TButton.vue";
import TFormSection from "@/Components/Form/TFormSection.vue";
import TFormContent from "@/Components/Form/TFormContent.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputMultiSelect from "@/Components/Form/Inputs/TInputMultiSelect.vue";
import {ref, defineComponent} from "vue";

export default defineComponent({
    name: "MultiSelectInput",
    components: {
        TInputMultiSelect,
        AppLayout,
        TButton,
        TFormSection,
        TFormContent,
        TInputGroup,
    },
    props: {
        users: {
            type: Array,
            default() {
                return []
            }
        }
    },
    setup() {
        const form = ref({
            managers: [],
            facilities: []
        })
        const facilities = [
            {name: 'Computer', value: 'computer'},
            {name: 'Phone', value: 'phone'},
            {name: 'Lodge', value: 'lodge'},
            {name: 'Personal Office', value: 'personal-office'},
            {name: 'Shared Office', value: 'shared-office'},
        ]

        const reset = () => {
            form.value.managers = [];
            form.value.facilities = [];
        }

        return {form, facilities, reset}
    }
})
</script>

<style scoped>

</style>





























================================================
FILE: resources/js/Pages/Samples/FormElements/RepeatableField.vue
================================================
<template>
  <app-layout>
    <template #header>Repeatable Input Type</template>
    <template #subHeader>One field but every things is in there</template>
    <template #default>
      <t-form-content @reset="reset" @submitted="null">
        <t-form-section
            description="This information is subject to personal data protection law."
            title="Personal Infos">

          <!-- Name -->
          <t-input-group class="col-span-12" label="Name" labelFor="name">
            <t-input-text id="name" v-model="form.name" placeholder="Business mail address"/>
          </t-input-group>

          <!-- Hobbies -->
          <t-input-group class="col-span-12" label="Hobbies (1 field)" labelFor="tax_id">
            <t-input-repeatable id="hobbies" v-model="form.hobbies" value1name="Hobby"/>
          </t-input-group>

          <!-- Education Info -->
          <t-input-group class="col-span-12" label="Education Info (2 fields)" labelFor="tax_id">
            <t-input-repeatable id="education" v-model="form.education" value1name="School" value2name="Degree"/>
          </t-input-group>
        </t-form-section>
      </t-form-content>
    </template>
  </app-layout>
</template>

<script>
/*Main Functions*/
import AppLayout from "@/Layouts/AppLayout.vue";
import {useForm} from "@inertiajs/vue3";

/*Components*/
import TFormContent from "@/Components/Form/TFormContent.vue";
import TFormSection from "@/Components/Form/TFormSection.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import TInputRepeatable from "@/Components/Form/Inputs/TInputRepeatable.vue";

export default {
  name: "RepeatableField",
  components: {TInputRepeatable, TInputText, TInputGroup, TFormSection, TFormContent, AppLayout},

    setup(){
      const form = useForm({
          name: null,
          education: [],
          hobbies: [],
      })

        const reset = () => {
          form.reset()
        }

        return {
          form,
            reset
        }
    },
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/FormElements/SelectInput.vue
================================================
<template>
    <app-layout :actionButtons="true">
        <template #header>
            Select Input Component
        </template>
        <template #action-buttons>
            <t-button :radius="3" color="yellow">
                <icon icon="angle-left"/>
                Back to Home
            </t-button>
            <t-button :radius="3" color="green">
                <icon icon="plus-circle"/>
                Add New
            </t-button>
        </template>
        <template #default>
            <t-form-content @reset="reset" @submitted="save">
                <t-form-section
                    description="This information is subject to personal data protection law."
                    title="Personal Infos">
                    <!-- Manager -->
                    <t-input-group class="col-span-12 md:col-span-6" label="Manager - Searchable" labelFor="user_id">
                        <t-input-select
                            v-model="form.user_id"
                            :clear-button="true"
                            :options="users"
                            :search="true"
                            optionsLabelKey="name"
                            optionsValueKey="id"
                            place-holder="Select a manager"
                            search-place-holder="Search a manager..."
                        />
                    </t-input-group>
                    <!-- Rich Options Content -->
                    <t-input-group class="col-span-12 md:col-span-6" label="Rich Options Content" labelFor="status">
                        <t-input-select
                            v-model="form.status"
                            :clear-button="true"
                            :options="status"
                            optionsLabelKey="name"
                            optionsValueKey="value"
                            place-holder="Select a status"
                        >
                            <template #label="{ props }">
                                <span v-if="props.value===true" class="flex flex-row items-center gap-1">
                  <t-check-circle-icon class="w-5 h-5 text-green-500 "/> {{ props.name }}
                </span>
                                <span v-if="props.value===false" class="flex flex-row items-center gap-1">
                                    <t-x-circle-icon class="w-5 h-5 text-red-500 items-center"/> {{ props.name }}
                                </span>
                            </template>
                        </t-input-select>
                    </t-input-group>
                    <!--Disabled-->
                    <t-input-group label="Disabled" class="col-span-12 md:col-span-6">
                        <t-input-select disabled/>
                    </t-input-group>
                    <!--Read Only-->
                    <t-input-group label="Read Only" class="col-span-12 md:col-span-6">
                        <t-input-select
                            :model-value="true"
                            :options="status"
                            options-value-key="value"
                            options-label-key="name"
                            read-only
                        >
                            <template #label="{ props }">
                                <span v-if="props.value===true" class="flex flex-row items-center gap-1">
                                    <t-check-circle-icon class="w-5 h-5 text-green-500 "/> {{ props.name }}
                                </span>
                                <span v-if="props.value===false" class="flex flex-row items-center gap-1">
                                    <t-x-circle-icon class="w-5 h-5 text-red-500 items-center"/> {{ props.name }}
                                </span>
                            </template>
                        </t-input-select>
                    </t-input-group>
                </t-form-section>
            </t-form-content>
        </template>
    </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import TButton from "@/Components/Button/TButton.vue";
import TFormSection from "@/Components/Form/TFormSection.vue";
import TFormContent from "@/Components/Form/TFormContent.vue";
import 'simple-syntax-highlighter/dist/sshpre.css'
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputSelect from "@/Components/Form/Inputs/TInputSelect.vue";
import TCheckCircleIcon from "@/Components/Icon/TCheckCircleIcon.vue";
import TXCircleIcon from "@/Components/Icon/TXCircleIcon.vue";

export default {
    name: "SelectInput",
    components: {
        TXCircleIcon,
        TCheckCircleIcon,
        TInputSelect,
        AppLayout,
        TButton,
        TFormSection,
        TFormContent,
        TInputGroup,
    },
    props: ['users'],
    data() {
        return {
            loading: false,
            form: this.$inertia.form({
                _method: 'POST',
                user_id: null,
                status: false
            }),
            status: [
                {name: 'Passive', value: false, icon: 'XIcon', class: 'w-5 h-5 text-red-500 mr-2'},
                {name: 'Active', value: true, icon: 'Checked', class: 'w-5 h-5 text-green-500 mr-2'}
            ]
        };
    },
    methods: {
        reset: function () {
            this.form.name = null;
            this.form.user_id = null;
            this.form.tax_id = null;
            this.form.email = null;
            this.form.phone = null;
            this.form.status = null;
            this.form.address = null;
        },
        save() {
            this.form.post(route('customer.store'), {
                errorBag: 'customer',
                preserveScroll: true,
            });
            this.loading = true;
        }
    },
}
</script>

<style scoped>

</style>





























================================================
FILE: resources/js/Pages/Samples/FormElements/SimpleField.vue
================================================
<template>
  <app-layout>
    <template #header>Simple Form Fields</template>
    <template #subHeader>Text, text area, select and a few things</template>
    <template #default>
      <t-form-content @reset="reset" @submitted="save">

        <t-form-section
          description="Please look at the menu for Select, Date and Repeatable Fields"
          title="Form Inputs">
          <!-- Text -->
          <t-input-group
            class="col-span-12 lg:col-span-6"
            label-for="text"
          >
            <t-input-text
              id="text"
              placeholder="Disabled Text Input Placeholder"
              disabled
            >
            </t-input-text>
          </t-input-group>
          <!-- Text & Icon -->
          <t-input-group
            class="col-span-12 lg:col-span-6"
            label="Input field with icon slot"
            label-for="text"
          >
            <t-input-text
              id="text-icon"
              placeholder="Text Input"
            >
              <template #icon>
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
                  </svg>
              </template>
            </t-input-text>
          </t-input-group>
          <!-- Text & Prepend and Append Feature -->
          <t-input-group
            class="col-span-12 lg:col-span-6"
            label="Prepend and append feature"
            label-for="text"
          >
            <t-input-text
              id="text-prepend-append"
              placeholder="Text Input"
              prepend="Expense"
            >
              <!--Depend-->
              <template #append>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </template>
            </t-input-text>
          </t-input-group>
          <!-- Text & Icon & Prepend and Append -->
          <t-input-group
            class="col-span-12 lg:col-span-6"
            label="Icon, prepend and append feature"
            label-for="text-icon-prepend-append"
          >
            <t-input-text
              id="text"
              v-model="form.text"
              placeholder="Text Input"
              prepend="Sallary"
              append="TRY"
            >
              <!--Icon-->
              <template #icon>
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
                  </svg>
              </template>
            </t-input-text>
          </t-input-group>
          <!-- Text input with select feature by outside -->
          <t-input-group
            class="col-span-12 lg:col-span-6"
            label="Text input with select feature by outside"
            label-for="text"
          >
            <t-input-text
              id="text-select"
              type="text"
              select-position="right"
              placeholder="Simple Text Input Placeholder"
              v-model:selectValue="selectTextInput.framework.select"
              v-model="selectTextInput.framework.text"
              :options="selectTextInput.framework.options"
            >
            </t-input-text>
          </t-input-group>
            <!-- Text input with start select feature and append by inside -->
            <t-input-group
                class="col-span-12 lg:col-span-6"
                label="Text input with start select feature and append by inside"
                label-for="text-icon-prepend-append"
            >
                <t-input-text
                    id="text"
                    placeholder="Version"
                    select-type="inside"
                    prepend="Framework"
                    select-position="left"
                    v-model:selectValue="selectTextInput.framework.select"
                    v-model="selectTextInput.framework.text"
                    :options="selectTextInput.framework.options"
                />
            </t-input-group>
          <!-- Text input with select feature by inside -->
          <t-input-group
            class="col-span-12 lg:col-span-6"
            label="Text input with select feature by inside"
            label-for="text"
          >
            <t-input-text
              id="text-select"
              type="text"
              select-type="inside"
              select-position="right"
              placeholder="tailadmin.dev"
              prepend="https://"
              v-model:selectValue="selectTextInput.link.select"
              v-model="selectTextInput.link.text"
              :options="selectTextInput.link.options"
            >
            </t-input-text>
          </t-input-group>
          <!-- Disabled Combined Text Input -->
          <t-input-group
            class="col-span-12 lg:col-span-6"
            label="Text input with select feature by inside"
            label-for="text"
          >
            <t-input-text
              id="text-select"
              type="text"
              select-type="inside"
              select-position="right"
              placeholder="tailadmin.dev"
              prepend="https://"
              v-model:selectValue="selectTextInput.link.select"
              v-model="selectTextInput.link.text"
              :options="selectTextInput.link.options"
              disableds
            >
            </t-input-text>
          </t-input-group>
          <!-- Password-->
          <t-input-group class="col-span-12 lg:col-span-6" label="Password" label-for="password">
            <t-input-text id="password" v-model="form.password" placeholder="Password" type="password" />
          </t-input-group>
          <!-- Number-->
          <t-input-group class="col-span-12 lg:col-span-6" label="Number" label-for="number">
            <t-input-text id="number" v-model="form.number" placeholder="Number" type="number" />
          </t-input-group>
          <!--Month-Browser Calendar-->
          <t-input-group class="col-span-12 lg:col-span-6" label="Date-HTML5" label-for="date">
            <t-input-text id="date" v-model="form.date" placeholder="10.11.1938" type="date" />
          </t-input-group>
          <!--Month-Browser Calendar-->
          <t-input-group class="col-span-12 lg:col-span-6" label="Month-HTML5" label-for="month">
            <t-input-text id="month" v-model="form.month" placeholder="August 2021" type="month" />
          </t-input-group>
          <!--Time-Browser Calendar-->
          <t-input-group class="col-span-12 lg:col-span-6" label="Time-HTML5" label-for="time">
            <t-input-text id="time" v-model="form.time" placeholder="9:05" type="time" />
          </t-input-group>
          <!--Color-Browser Picker-->
          <t-input-group class="col-span-12 lg:col-span-6" label="Color-HTML5" label-for="color">
            <t-input-text id="color" v-model="form.color" type="color" />
          </t-input-group>
          <!--Single File-->
          <t-input-group class="col-span-12 lg:col-span-6" label="Singe File" label-for="singleFile">
            <t-input-file :preview="true" id="singleFile" v-model="form.singleFile" />
          </t-input-group>
          <!--Multi File-->
          <t-input-group class="col-span-12 lg:col-span-6" label="Multi File" label-for="multiFile">
            <t-input-file :preview="true" id="multiFile" v-model="form.multiFile" :multiple="true" />
          </t-input-group>
          <!--Check Box-->
          <t-input-group class="col-span-12 lg:col-span-6" label="CheckBox" label-for="checkbox">
            <div class="inline-flex flex-wrap items-center gap-2">
              <t-input-check-box
                v-model="form.checkbox"
                :disabled="true"
                :radius="0"
                color="solid-white"
                input-value="disabled"
                label="Disabled"
              />
              <t-input-check-box
                v-model="form.checkbox"
                :radius="0"
                color="solid-white"
                input-value="default1"
                label="Default"
              />


              <t-input-check-box
                v-model="form.checkbox"
                :checked="true"
                :radius="8"
                color="solid-gray"
                input-value="default2"
                label="Default"
              />

              <t-input-check-box
                v-model="form.checkbox"
                :radius="3"
                color="solid-green"
                input-value="yes"
                label="Yes"
              >
                <template #icon>
                  <t-check-icon class="w-5 h-5" />
                </template>
              </t-input-check-box>

              <t-input-check-box
                v-model="form.checkbox"
                :radius="3"
                color="solid-red"
                input-value="no"
                label="No"
              >
                <template #icon>
                  <t-x-icon class="w-5 h-5" />
                </template>
              </t-input-check-box>

              <t-input-check-box
                v-model="form.checkbox"
                :radius="5"
                color="solid-blue"
                input-value="maybe"
                label="Maybe"
              >
                <template #icon>
                  ?
                </template>
              </t-input-check-box>
            </div>
          </t-input-group>
          <!--Radio Button-->
          <t-input-group class="col-span-12 lg:col-span-6" label="Radio Button" label-for="radio">
            <div class="inline-flex flex-wrap items-center gap-2">
              <t-input-radio-button
                v-model="form.radio"
                :disabled="true"
                :radius="0"
                color="solid-white"
                input-value="disabled"
                label="Disabled"
              />
              <t-input-radio-button
                v-model="form.radio"
                :radius="0"
                color="solid-white"
                input-value="default1"
                label="Default"
              />


              <t-input-radio-button
                v-model="form.radio"
                :checked="true"
                :radius="8"
                color="solid-gray"
                input-value="default2"
                label="Default"
              />

              <t-input-radio-button
                v-model="form.radio"
                :radius="3"
                color="solid-green"
                input-value="yes"
                label="Yes"
              >
                <template #icon>
                  <t-check-icon class="w-5 h-5" />
                </template>
              </t-input-radio-button>

              <t-input-radio-button
                v-model="form.radio"
                :radius="3"
                color="solid-red"
                input-value="no"
                label="No"
              >
                <template #icon>
                  <t-x-icon class="w-5 h-5" />
                </template>
              </t-input-radio-button>

              <t-input-radio-button
                v-model="form.radio"
                :radius="5"
                color="solid-blue"
                input-value="maybe"
                label="Maybe"
              >
                <template #icon>
                  ?
                </template>
              </t-input-radio-button>
            </div>
          </t-input-group>
          <!-- Address -->
          <t-input-group class="col-span-12" label="Text Area" label-for="address">
            <t-input-text-area
              id="address"
              v-model="form.textArea"
              :clear-button="true"
              :counter="true"
              :rows="3"
              placeholder="Full address" />
          </t-input-group>
        </t-form-section>
      </t-form-content>
    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import TFormContent from "@/Components/Form/TFormContent.vue";
import TFormSection from "@/Components/Form/TFormSection.vue";
import TInputGroup from "@/Components/Form/TInputGroup.vue";
import TInputText from "@/Components/Form/Inputs/TInputText.vue";
import TInputFile from "@/Components/Form/Inputs/TInputFile.vue";
import TInputCheckBox from "@/Components/Form/Inputs/TInputCheckBox.vue";
import TInputRadioButton from "@/Components/Form/Inputs/TInputRadioButton.vue";
import TInputTextArea from "@/Components/Form/Inputs/TInputTextArea.vue";
import TCheckIcon from "@/Components/Icon/TCheckIcon.vue";
import TXIcon from "@/Components/Icon/TXIcon.vue";
import { ref, defineComponent } from "vue";

export default defineComponent({
  name: "SimpleField",
  components: {
    TXIcon,
    TCheckIcon,
    TInputRadioButton,
    TInputFile,
    TInputCheckBox, TInputTextArea, TInputText, TInputGroup, TFormSection, TFormContent, AppLayout
  },
  setup() {
    const selectTextInput = ref({
      framework: {
        select: 'laravel',
        text: "",
        options:
          [
            { key: "laravel", label: "Laravel" },
            { key: "tailwind", label: "Taildwindcss" },
            { key: "vuejs", label: "VueJS" }
          ]
      },
      link: {
        select: 'dev',
        text: "",
        options:
          [
            { key: "dev", label: ".dev" },
            { key: "com", label: ".com" },
            { key: "net", label: ".net" }
          ]
      }
    });

    return { selectTextInput };
  },
  data() {
    return {
      loading: false,
      form: this.$inertia.form({
        _method: "POST",
        text: null,
        password: null,
        number: null,
        date: null,
        month: null,
        time: null,
        color: null,
        singleFile: null,
        multiFile: [],
        checkbox: [],
        radio: null,
        textArea: null
      })
    };
  },
  methods: {
    reset: function() {
      this.form.text = null;
      this.form.password = null;
      this.form.number = null;
      this.form.date = null;
      this.form.month = null;
      this.form.time = null;
      this.form.color = null;
      this.form.file = null;
      this.form.checkbox = [];
      this.form.radio = null;
      this.form.textArea = null;
    },
    save() {
      this.form.post(route("user.store"), {
        errorBag: "user",
        preserveScroll: true
      });
      this.loading = true;
    }
  }
});
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/FormElements/TagInput.vue
================================================
<template>
  <app-layout>
    <template #header>Tag Input</template>
    <template #subHeader>A container for array values</template>
    <template #default>

      <ssh-pre :copy-button="true" language="html" label="Code">{{sampleCode.html}}</ssh-pre>
      <ssh-pre :copy-button="true" language="js" label="JS">{{sampleCode.js}}</ssh-pre>
    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import SshPre from 'simple-syntax-highlighter'
import 'simple-syntax-highlighter/dist/sshpre.css'

export default {
  name: "TagInput",
  components: {AppLayout, SshPre},
  data() {
    return {
      sampleCode: {
        html:
            '<t-input-group label="Text Label" label-for="name4" sub-label="Cash only" sub-label-color="yellow" error="Please enter numerical value">\n' +
            '    <t-input-text id="name4" placeholder="I\'m a placeholder text" value="Hi, I\'m a prefilled text"/>\n' +
            '</t-input-group>',
        js:
            'import TInputGroup from "@/Components/Form/TInputGroup.vue";\n' +
            'import TInputText from "@/Components/Form/Inputs/TInputText.vue";\n' +
            '\n' +
            'export default {\n' +
            '  name: "InputGroup",\n' +
            '  components: {SshPre,GridSection, TInputText, TInputGroup, ContentCard, AppLayout},\n' +
            '  }',
        table: {
          header: [
            {key: 'variable', label: 'Variable'},
            {key: 'type', label: 'Value Type'},
            {key: 'details', label: 'Details'},
          ],
          content: [
            {variable: 'label', type: 'String', details: 'Your input label'},
            {variable: 'label-for', type: 'String', details: 'Label identity indicator, you should enter input\'s id'},
            {
              variable: 'sub-label',
              type: 'String',
              details: 'If you want to show a second and small label, you can use'
            },
            {
              variable: 'sub-label-color',
              type: 'String',
              details: 'You can change sub label color <br><b>Options:</b> red, blue, green, yellow, indigo, pink, gray'
            },
            {
              variable: 'error',
              type: 'String',
              details: 'Every time it\'s text color is red, If It has a value, it shows'
            }
          ]
        }
      }
    }
  }
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/FormElements/Validation.vue
================================================
<template>
  <app-layout>
    <template #header>Form Validations</template>
    <template #subHeader>Require, length and a few things</template>
    <template #default>

      <ssh-pre :copy-button="true" language="html" label="Code">{{sampleCode.html}}</ssh-pre>
      <ssh-pre :copy-button="true" language="js" label="JS">{{sampleCode.js}}</ssh-pre>
    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import SshPre from "simple-syntax-highlighter";
import 'simple-syntax-highlighter/dist/sshpre.css'

export default {
  name: "Validation",
  components: {AppLayout, SshPre},
  data() {
    return {
      sampleCode: {
        html:
            '<t-input-group label="Text Label" label-for="name4" sub-label="Cash only" sub-label-color="yellow" error="Please enter numerical value">\n' +
            '    <t-input-text id="name4" placeholder="I\'m a placeholder text" value="Hi, I\'m a prefilled text"/>\n' +
            '</t-input-group>',
        js:
            'import TInputGroup from "@/Components/Form/TInputGroup.vue";\n' +
            'import TInputText from "@/Components/Form/Inputs/TInputText.vue";\n' +
            '\n' +
            'export default {\n' +
            '  name: "InputGroup",\n' +
            '  components: {SshPre,GridSection, TInputText, TInputGroup, ContentCard, AppLayout},\n' +
            '  }',
        table: {
          header: [
            {key: 'variable', label: 'Variable'},
            {key: 'type', label: 'Value Type'},
            {key: 'details', label: 'Details'},
          ],
          content: [
            {variable: 'label', type: 'String', details: 'Your input label'},
            {variable: 'label-for', type: 'String', details: 'Label identity indicator, you should enter input\'s id'},
            {
              variable: 'sub-label',
              type: 'String',
              details: 'If you want to show a second and small label, you can use'
            },
            {
              variable: 'sub-label-color',
              type: 'String',
              details: 'You can change sub label color <br><b>Options:</b> red, blue, green, yellow, indigo, pink, gray'
            },
            {
              variable: 'error',
              type: 'String',
              details: 'Every time it\'s text color is red, If It has a value, it shows'
            }
          ]
        }
      }
    }
  }
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Layouts/Grid.vue
================================================
<template>
  <app-layout>
    <template #header>Grid</template>
    <template #subHeader>Grid system for contents</template>
    <template #default>
      <grid-section :col-tablet="2" :col-laptop="3" :col-desktop="4">
        <div v-for="i in 6"
             class="bg-gray-300 border border-gray-500 h-16 items-center justify-center flex font-bold text-xl">
          {{ 'Col ' + i }}
        </div>
      </grid-section>
    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import GridSection from "@/Layouts/GridSection.vue";

export default {
  name: "Grid",
  components: {GridSection, AppLayout},
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Layouts/LayoutStructure.vue
================================================
<template>
  <app-layout :action-buttons="true">
    <template #header><div class="bg-blue-200 w-full h-full">Header</div></template>
    <template #subHeader><div class="bg-gray-200 w-full h-full">SubHeader</div></template>
    <template #action-buttons>
      <div class="bg-green-200 w-full h-full flex justify-center items-center">Action Button Area</div>
    </template>
    <template #default>
      <div class="bg-yellow-200 w-full items-center justify-center flex text-center h-36">Content Area</div>
    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";

export default {
  name: "LayoutStructure",
  components: {AppLayout},
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Layouts/StatisticWidget.vue
================================================
<template>
  <app-layout>
    <template #header>Statistic Widget</template>
    <template #subHeader>Preview area for your data</template>
    <template #default>
      <grid-section :col-tablet="2" :col-desktop="4">
        <!--With Icon, Down Direction-->
        <t-statistic-widget
            :width="1"
            color="gradient-purple-to-pink"
            diff-direction="down"
            diff-value="15%"
            widget-value="254">
          <template #title>
            Incomes
          </template>
          <template #icon>
            <t-cash-icon class="w-16 h-16"/>
          </template>
        </t-statistic-widget>
        <!--With Icon, Up Direction-->
        <t-statistic-widget
            :radius="5"
            :width="1"
            color="solid-green"
            diff-direction="up"
            diff-value="8"
            widget-value="30">
          <template #title>
            Daily Done Charts
          </template>
          <template #icon>
            <t-shopping-bag-icon class="w-15 h-15"/>
          </template>
        </t-statistic-widget>
        <t-statistic-widget
            :radius="5"
            :width="1"
            color="solid-red"
            diff-direction="positive-down"
            diff-value="8%"
            widget-value="12.254,05 TL">
          <template #title>
            Refunds
          </template>
        </t-statistic-widget>
        <!--With Picture, Down Direction-->
        <t-statistic-widget
            :radius="5"
            :width="1"
            color="solid-white"
            diff-direction="down"
            diff-value="15%"
            widget-value="254 USD">
          <template #title>
            Stationery Cost
          </template>
          <template #picture>
            <img :src="'/img/samples/imgMelBaylon-6WLcOFn4HKE-unsplash.jpg'">
          </template>
        </t-statistic-widget>
        <!-- &lt;!&ndash;With Line Chart, Without Diff Direction, Icon &ndash;&gt;
         <t-statistic-widget
             chart-type="line-chart"
             color="solid-yellow"
             diff-value="30%"
             radius="7"
             widget-value="254"
             :width="1">
             <template #title>
                 Customer Complaints
             </template>
         </t-statistic-widget>
         &lt;!&ndash;With Bar Chart, Without Diff Direction, Icon&ndash;&gt;
         <t-statistic-widget
             chart-type="bar-chart"
             color="solid-indigo"
             diff-direction="up"
             diff-value="30%"
             radius="1"
             widget-value="254"
             :width="2">
             <template #title>
                 New Customers
             </template>
         </t-statistic-widget>-->
      </grid-section>
    </template>
  </app-layout>
</template>

<script>
/*Layout*/
import AppLayout from "@/Layouts/AppLayout.vue";
/*Component*/
import GridSection from "@/Layouts/GridSection.vue";
import TStatisticWidget from "@/Components/Card/TStatisticWidget.vue";
import TCashIcon from "@/Components/Icon/TCashIcon.vue";
import TShoppingBagIcon from "@/Components/Icon/TShoppingBagIcon.vue";

export default {
  name: "StatisticWidget",
  components: {AppLayout, GridSection, TCashIcon, TShoppingBagIcon, TStatisticWidget},
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Samples/Test.vue
================================================
<template>
  <app-layout>
    <template #header>
      Tabs
    </template>
    <template #subHeader>
      Demo
    </template>
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";

export default {
  name: "Tab",
  components: { AppLayout},
  data(){
    return{
    }
  }
};
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Settings/Index.vue
================================================
<template>
    <app-layout>
        <template #header>
            Settings
        </template>
        <template #subHeader>
            User and features management
        </template>
        <grid-section :gap="2" :col-tablet="2" :col-desktop="4">
            <!--Users-->
            <Link :href="route('settings-user.index')">
                <t-content-card color="light-indigo" class="hover:bg-white">
                    <template #title>Users</template>
                    <template #icon>
                        <t-user-group-icon class="w-12 h-12"/>
                    </template>
                    <template #content>
                        {{ users_count }} user/s
                    </template>
                </t-content-card>
            </Link>
            <!--Roles-->
            <Link :href="route('settings-role.index')">
                <t-content-card color="light-purple" class="hover:bg-white">
                    <template #title>Roles</template>
                    <template #icon>
                        <t-chevron-double-down-icon class="w-12 h-12"/>
                    </template>
                    <template #content>
                        {{ roles_count }} role/s
                    </template>
                </t-content-card>
            </Link>
            <!--Permissions-->
            <Link :href="route('settings-permission.index')">
                <t-content-card color="light-pink" class="hover:bg-white">
                    <template #title>Permissions</template>
                    <template #icon>
                        <t-adjustments-icon class="w-12 h-12"/>
                    </template>
                    <template #content>
                        {{ permissions_count }} permission/s
                    </template>
                </t-content-card>
            </Link>
            <!--Settings-->
            <Link :href="route('settings-system')">
                <t-content-card color="light-blue" class="hover:bg-white">
                    <template #title>Settings</template>
                    <template #icon>
                        <t-cog-icon class="w-12 h-12"/>
                    </template>
                    <template #content>
                        Definitions of System
                    </template>
                </t-content-card>
            </Link>
        </grid-section>
    </app-layout>
</template>

<script>
import {Link} from "@inertiajs/vue3";
import AppLayout from "@/Layouts/AppLayout.vue";
import GridSection from "@/Layouts/GridSection.vue";
import TContentCard from "@/Components/Card/TContentCard.vue";
import TStatisticWidget from "@/Components/Card/TStatisticWidget.vue";
import TCogIcon from "@/Components/Icon/TCogIcon.vue";
import TAdjustmentsIcon from "@/Components/Icon/TAdjustmentsIcon.vue";
import TChevronDoubleDownIcon from "@/Components/Icon/TChevronDoubleDownIcon.vue";
import TUserGroupIcon from "@/Components/Icon/TUserGroupIcon.vue";

export default {
    name: "Index",
    components: {
        AppLayout,
        GridSection,
        Link,
        TAdjustmentsIcon,
        TChevronDoubleDownIcon,
        TCogIcon,
        TContentCard,
        TStatisticWidget,
        TUserGroupIcon
    },
    props: ['users_count', 'roles_count', 'permissions_count'],
}
</script>


================================================
FILE: resources/js/Pages/Settings/Permission/Index.vue
================================================
<template>
    <app-layout>
        <template #header>Permissions</template>
        <template #subHeader>Management of Permissions</template>
        <initial-vertical-menu :menu="menuList" class="mb-10"/>
        <div v-if="permissionGroups.length>0" class="grid grid-cols-4 grid-flow-row gap-4">
            <template v-for="group in permissionGroups">
                <div class="flex border border-slate-300 bg-white dark:bg-slate-800 dark:text-slate-100 rounded flex-col select-none">
                    <div class="flex flex-col p-4">
                        <span v-text="group.name" class="font-semibold"></span>
                        <span v-text="group.description" class="text-sm"></span>
                    </div>
                    <div class="flex justify-end text-slate-700 overflow-hidden">
                        <div class="group flex space-x-1 font-semibold items-center cursor-pointer bg-slate-300 hover:bg-emerald-200 active:bg-emerald-500 p-1 rounded-l-full mb-2 -mr-1 duration-100">
                            <icon icon="plus-circle"/>
                            <span class="text-2xs opacity-0 transform w-0 group-hover:block group-hover:w-14 group-hover:opacity-100 transition-all duration-300">Permission</span>
                        </div>
                    </div>
                </div>
            </template>
            <div class="flex space-y-2 justify-center items-center border border-slate-400 bg-emerald-200 hover:bg-emerald-300 hover:border-emerald-300 transform active:scale-95 duration-300 select-none dark:bg-slate-800 text-emerald-800 dark:text-slate-100 p-2 rounded flex-col cursor-pointer">
                <icon icon="plus-circle" size="2x" class="transform hover:scale-125 duration-300"/>
                <span class="text-sm">Add new group</span>
            </div>
        </div>

        <!--Empty Group Message-->
        <div v-else class="flex justify-between w-full p-4 rounded bg-orange-200 dark:bg-slate-800 text-slate-700 dark:text-slate-100 items-center text-xl">
            <span>
                There is any role groups, please add a role group
            </span>
            <t-button color="green" class="text-sm">
                Add New Group
            </t-button>
        </div>

        <!--Modal-->
        <t-modal v-model="showModal.status">
            <template #header>
                <span v-text="showModal.title"></span>
            </template>
            <template #content>
                <span v-html="modalContent"></span>
            </template>
            <template #footer-left>
                <t-button
                    design="light"
                    color="green"
                    @click="showModal.status = false"
                >
                    No, Nevermind
                </t-button>
            </template>
            <template #footer-right>
                <form id="delete" @submit.prevent="showModal.submit">

                    <t-button
                        design="light"
                        color="gray"
                        type="submit">
                        Yes, Delete
                    </t-button>
                </form>
            </template>
        </t-modal>
    </app-layout>

</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import InitialVerticalMenu from "@/Layouts/InitialVerticalMenu.vue";
import {settingsMenuMixin} from "@/Mixins/settingsMenuMixin";
import {reactive, ref} from "vue";
import {useForm} from "@inertiajs/vue3";
import TBackEndTable from "@/Components/Table/TBackEndTable.vue";
import TModal from "@/Components/Modal/TModal.vue";
import TButton from "@/Components/Button/TButton.vue";
import TAlert from "@/Components/Alert/TAlert.vue";
import {faPlusCircle} from "@fortawesome/free-solid-svg-icons/faPlusCircle"
import {library} from "@fortawesome/fontawesome-svg-core";
library.add(faPlusCircle)

export default {
    name: "Index",
    components: {TAlert, InitialVerticalMenu, AppLayout, TBackEndTable, TModal, TButton},
    mixins: [settingsMenuMixin],
    props: {
        permissions: {
            type: Object,
            default: () => {
            }
        },
        permissionGroups: {
            type: Object,
            default: () => {
            }
        }
    },
    setup() {
        const showModal = ref({
            type: null,
            status: false
        });
        const modalContent = ref(null);
        const selectedPermission = ref(null);
        const form = useForm({
            id: null
        })

        const showDeleteModal = (role) => {
            showModal.value.status = true
            showModal.value.title = 'User Deleting'
            showModal.value.submit = deletePermission
            modalContent.value = `You are going to delete <b> ${role.name} </b>, Are you sure ?`
        }

        const deletePermission = () => {
            form.id = selectedPermission.value;
            form.delete(route('settings-permission.destroy', selectedPermission.value), {
                preserveScroll: true,
                onSuccess: () => showModal.value = false,
            })
        }

        const compareOperators = reactive([
            {key: "contains", label: "contains"},
            {key: "notContains", label: "not contains"},
            {key: "starts", label: "starts"},
            {key: "ends", label: "ends"}
        ]);

        const header = reactive([
            {
                label: "Name",
                key: "name",
                align: "left",
                status: true,
                sortable: true,
                simpleSearchable: true,
                advancedSearchable: true,
                advancedSearchInputType: "text",
                compareOperators: compareOperators
            }
        ])

        return {
            deletePermission,
            showDeleteModal,
            modalContent,
            selectedPermission,
            header,
            showModal
        }
    }
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Settings/Role/Index.vue
================================================
<template>
  <app-layout>
    <template #header>Roles</template>
    <template #subHeader>Management of Roles</template>
      <initial-vertical-menu :menu="menuList" class="mb-10"/>
      <t-back-end-table
          @selectedItem="selectedPermission = $event.data;$event.action === 'delete' && showDeleteModal($event.data)"
          :content="Roles"
          :header="header"
          content-key="roles"
          unique-id="id"
          search-route="settings-role.search"
      >

      </t-back-end-table>
      <t-modal v-model="showModal">
          <template #header>
              User Deleting
          </template>
          <template #content>
              <span v-html="modalContent"></span>
          </template>
          <template #footer-left>
              <t-button
                  design="light"
                  color="green"
                  @click="showModal = false"
              >
                  No, Nevermind
              </t-button>
          </template>
          <template #footer-right>
              <form id="delete" @submit.prevent="deletePermission">

                  <t-button
                      design="light"
                      color="gray"
                      type="submit">
                      Yes, Delete
                  </t-button>
              </form>
          </template>
      </t-modal>
  </app-layout>

</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import InitialVerticalMenu from "@/Layouts/InitialVerticalMenu.vue";
import {settingsMenuMixin} from "@/Mixins/settingsMenuMixin";
import {reactive, ref} from "vue";
import {useForm} from "@inertiajs/vue3";
import TBackEndTable from "@/Components/Table/TBackEndTable.vue";
import TModal from "@/Components/Modal/TModal.vue";
import TButton from "@/Components/Button/TButton.vue";

export default {
  name: "Index",
  components: {InitialVerticalMenu, AppLayout, TBackEndTable,TModal,TButton},
  mixins: [settingsMenuMixin],
    props: {
        Roles: {
            type: Object,
            default: ()=>{}
        }
    },
    setup() {
        const showModal = ref(false);
        const modalContent = ref(null);
        const selectedPermission = ref(null);
        const form = useForm({
            id: null
        })

        const showDeleteModal = (role)=> {
            showModal.value = true
            modalContent.value = `You are going to delete <b> ${role.name} </b>, Are you sure ?`
        }

        const deletePermission = ()=> {
            form.id = selectedPermission.value;
            form.delete(route('settings-role.destroy', selectedPermission.value), {
                preserveScroll: true,
                onSuccess: () => showModal.value = false,
            })
        }

        const compareOperators = reactive([
            {key: "contains", label: "contains"},
            {key: "notContains", label: "not contains"},
            {key: "starts", label: "starts"},
            {key: "ends", label: "ends"}
        ]);

        const header = reactive([
            {
                label: "Name",
                key: "name",
                align: "left",
                status: true,
                sortable: true,
                simpleSearchable: true,
                advancedSearchable: true,
                advancedSearchInputType: "text",
                compareOperators: compareOperators
            }
        ])

        return {
            deletePermission,
            showDeleteModal,
            modalContent,
            selectedPermission,
            header,
            showModal
        }
    }
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Settings/System.vue
================================================
<template>
  <app-layout>
    <template #header>System Settings</template>
    <template #subHeader>Management of System's Variables</template>
    <initial-vertical-menu :menu="menuList"/>
  </app-layout>

</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import InitialVerticalMenu from "@/Layouts/InitialVerticalMenu.vue";
import {settingsMenuMixin} from "@/Mixins/settingsMenuMixin";

export default {
  name: "SettingsSystem",
  components: {InitialVerticalMenu, AppLayout},
  mixins: [settingsMenuMixin]
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Settings/User.vue
================================================
<template>
    <app-layout title="Users">
        <template #header>Users</template>
        <template #subHeader>Management of Users</template>
        <initial-vertical-menu :menu="menuList" class="mb-10"/>
        <t-back-end-table
            @selectedItem="selectedUser = $event.data;$event.action === 'delete' && showDeleteModal($event.data)"
            :content="users"
            :header="header"
            content-key="users"
            unique-id="id"
            search-route="settings-user.search"
        >

        </t-back-end-table>
        <t-modal v-model="showModal">
            <template #header>
                User Deleting
            </template>
            <template #content>
                <span v-html="modalContent"></span>
            </template>
            <template #footer-left>
                <t-button
                    design="light"
                    color="green"
                    @click="showModal = false"
                >
                    No, Nevermind
                </t-button>
            </template>
            <template #footer-right>
                <form id="delete" @submit.prevent="deleteUser">

                    <t-button
                        design="light"
                        color="gray"
                        type="submit">
                        Yes, Delete
                    </t-button>
                </form>
            </template>
        </t-modal>
    </app-layout>
</template>

<script>
/*Main functions*/
import {settingsMenuMixin} from "@/Mixins/settingsMenuMixin";
import {reactive, ref, toRefs, watch} from "vue";
import {useForm} from "@inertiajs/vue3";

/*Components*/
import AppLayout from "@/Layouts/AppLayout.vue";
import InitialVerticalMenu from "@/Layouts/InitialVerticalMenu.vue";
import TTable from "@/Components/Table/TTable.vue";
import TButton from "@/Components/Button/TButton.vue";
import TTrashIcon from "@/Components/Icon/TTrashIcon.vue";
import TPencilAltIcon from "@/Components/Icon/TPencilAltIcon.vue";
import TDropdown from "@/Components/Dropdown/TDropdown.vue";
import TDotsVerticalIcon from "@/Components/Icon/TDotsVerticalIcon.vue";
import TList from "@/Components/List/TList.vue";
import TListItem from "@/Components/List/TListItem.vue";
import TModal from "@/Components/Modal/TModal.vue";
import TBackEndTable from "@/Components/Table/TBackEndTable.vue";

export default {
    name: "SettingsUser",
    components: {
        TBackEndTable,
        TModal,
        TListItem,
        TList,
        TDotsVerticalIcon,
        TDropdown,
        TPencilAltIcon,
        TTrashIcon,
        TButton,
        TTable,
        InitialVerticalMenu,
        AppLayout
    },
    mixins: [settingsMenuMixin],
    props: {
        users: {
            type: Array,
            default() {
                return []
            }
        },
        roles: {
            type: Array,
            default() {
                return []
            }
        }
    },
    setup(props) {
        const {users, roles} = toRefs(props);
        const showModal = ref(false);
        const modalContent = ref(null);
        const selectedUser = ref(null);
        const form = useForm({
            id: null
        })

        watch(()=>selectedUser,()=>{

        })

        const showDeleteModal = (user)=> {
            showModal.value = true
            modalContent.value = `You are going to delete <b> ${user.name} </b>, Are you sure ?`
        }

        const deleteUser = ()=> {
            form.id = selectedUser.value;
            form.delete(route('settings-user.destroy', selectedUser.value), {
                preserveScroll: true,
                onSuccess: () => showModal.value = false,
            })
        }

        const compareOperators = reactive([
            {key: "contains", label: "contains"},
            {key: "notContains", label: "not contains"},
            {key: "starts", label: "starts"},
            {key: "ends", label: "ends"}
        ]);

        const header = reactive([
            {
                label: "Name",
                key: "name",
                align: "left",
                status: true,
                sortable: true,
                simpleSearchable: true,
                advancedSearchable: true,
                advancedSearchInputType: "text",
                compareOperators: compareOperators
            }
        ])

        return {
            showModal,
            showDeleteModal,
            deleteUser,
            modalContent,
            selectedUser,
            form,
            header,
            compareOperators,
        }
    }
}
</script>

<style scoped>

</style>


================================================
FILE: resources/js/Pages/Teams/Create.vue
================================================
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import CreateTeamForm from '@/Pages/Teams/Partials/CreateTeamForm.vue';
</script>

<template>
    <AppLayout title="Create Team">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                Create Team
            </h2>
        </template>

        <div>
            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
                <CreateTeamForm />
            </div>
        </div>
    </AppLayout>
</template>


================================================
FILE: resources/js/Pages/Teams/Partials/CreateTeamForm.vue
================================================
<script setup>
import { useForm } from '@inertiajs/vue3';
import FormSection from '@/Jetstream/FormSection.vue';
import InputError from '@/Jetstream/InputError.vue';
import InputLabel from '@/Jetstream/InputLabel.vue';
import PrimaryButton from '@/Jetstream/PrimaryButton.vue';
import TextInput from '@/Jetstream/TextInput.vue';

const form = useForm({
    name: '',
});

const createTeam = () => {
    form.post(route('teams.store'), {
        errorBag: 'createTeam',
        preserveScroll: true,
    });
};
</script>

<template>
    <FormSection @submitted="createTeam">
        <template #title>
            Team Details
        </template>

        <template #description>
            Create a new team to collaborate with others on projects.
        </template>

        <template #form>
            <div class="col-span-6">
                <InputLabel value="Team Owner" />

                <div class="flex items-center mt-2">
                    <img class="object-cover w-12 h-12 rounded-full" :src="$page.props.auth.user.profile_photo_url" :alt="$page.props.auth.user.name">

                    <div class="ms-4 leading-tight">
                        <div class="text-gray-900 dark:text-white">{{ $page.props.auth.user.name }}</div>
                        <div class="text-sm text-gray-700 dark:text-gray-300">
                            {{ $page.props.auth.user.email }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-span-6 sm:col-span-4">
                <InputLabel for="name" value="Team Name" />
                <TextInput
                    id="name"
                    v-model="form.name"
                    type="text"
                    class="block w-full mt-1"
                    autofocus
                />
                <InputError :message="form.errors.name" class="mt-2" />
            </div>
        </template>

        <template #actions>
            <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                Create
            </PrimaryButton>
        </template>
    </FormSection>
</template>


================================================
FILE: resources/js/Pages/Teams/Partials/DeleteTeamForm.vue
================================================
<script setup>
import { ref } from 'vue';
import { useForm } from '@inertiajs/vue3';
import ActionSection from '@/Jetstream/ActionSection.vue';
import ConfirmationModal from '@/Jetstream/ConfirmationModal.vue';
import DangerButton from '@/Jetstream/DangerButton.vue';
import SecondaryButton from '@/Jetstream/SecondaryButton.vue';

const props = defineProps({
    team: Object,
});

const confirmingTeamDeletion = ref(false);
const form = useForm({});

const confirmTeamDeletion = () => {
    confirmingTeamDeletion.value = true;
};

const deleteTeam = () => {
    form.delete(route('teams.destroy', props.team), {
        errorBag: 'deleteTeam',
    });
};
</script>

<template>
    <ActionSection>
        <template #title>
            Delete Team
        </template>

        <template #description>
            Permanently delete this team.
        </template>

        <template #content>
            <div class="max-w-xl text-sm text-gray-600 dark:text-gray-400">
                Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.
            </div>

            <div class="mt-5">
                <DangerButton @click="confirmTeamDeletion">
                    Delete Team
                </DangerButton>
            </div>

            <!-- Delete Team Confirmation Modal -->
            <ConfirmationModal :show="confirmingTeamDeletion" @close="confirmingTeamDeletion = false">
                <template #title>
                    Delete Team
                </template>

                <template #content>
                    Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.
                </template>

                <template #footer>
                    <SecondaryButton @click="confirmingTeamDeletion = false">
                        Cancel
                    </SecondaryButton>

                    <DangerButton
                        class="ms-3"
                        :class="{ 'opacity-25': form.processing }"
                        :disabled="form.processing"
                        @click="deleteTeam"
                    >
                        Delete Team
                    </DangerButton>
                </template>
            </ConfirmationModal>
        </template>
    </ActionSection>
</template>


================================================
FILE: resources/js/Pages/Teams/Partials/TeamMemberManager.vue
================================================
<script setup>
import { ref } from 'vue';
import { router, useForm, usePage } from '@inertiajs/vue3';
import ActionMessage from '@/Jetstream/ActionMessage.vue';
import ActionSection from '@/Jetstream/ActionSection.vue';
import ConfirmationModal from '@/Jetstream/ConfirmationModal.vue';
import DangerButton from '@/Jetstream/DangerButton.vue';
import DialogModal from '@/Jetstream/DialogModal.vue';
import FormSection from '@/Jetstream/FormSection.vue';
import InputError from '@/Jetstream/InputError.vue';
import InputLabel from '@/Jetstream/InputLabel.vue';
import PrimaryButton from '@/Jetstream/PrimaryButton.vue';
import SecondaryButton from '@/Jetstream/SecondaryButton.vue';
import SectionBorder from '@/Jetstream/SectionBorder.vue';
import TextInput from '@/Jetstream/TextInput.vue';

const props = defineProps({
    team: Object,
    availableRoles: Array,
    userPermissions: Object,
});

const page = usePage();

const addTeamMemberForm = useForm({
    email: '',
    role: null,
});

const updateRoleForm = useForm({
    role: null,
});

const leaveTeamForm = useForm({});
const removeTeamMemberForm = useForm({});

const currentlyManagingRole = ref(false);
const managingRoleFor = ref(null);
const confirmingLeavingTeam = ref(false);
const teamMemberBeingRemoved = ref(null);

const addTeamMember = () => {
    addTeamMemberForm.post(route('team-members.store', props.team), {
        errorBag: 'addTeamMember',
        preserveScroll: true,
        onSuccess: () => addTeamMemberForm.reset(),
    });
};

const cancelTeamInvitation = (invitation) => {
    router.delete(route('team-invitations.destroy', invitation), {
        preserveScroll: true,
    });
};

const manageRole = (teamMember) => {
    managingRoleFor.value = teamMember;
    updateRoleForm.role = teamMember.membership.role;
    currentlyManagingRole.value = true;
};

const updateRole = () => {
    updateRoleForm.put(route('team-members.update', [props.team, managingRoleFor.value]), {
        preserveScroll: true,
        onSuccess: () => currentlyManagingRole.value = false,
    });
};

const confirmLeavingTeam = () => {
    confirmingLeavingTeam.value = true;
};

const leaveTeam = () => {
    leaveTeamForm.delete(route('team-members.destroy', [props.team, page.props.auth.user]));
};

const confirmTeamMemberRemoval = (teamMember) => {
    teamMemberBeingRemoved.value = teamMember;
};

const removeTeamMember = () => {
    removeTeamMemberForm.delete(route('team-members.destroy', [props.team, teamMemberBeingRemoved.value]), {
        errorBag: 'removeTeamMember',
        preserveScroll: true,
        preserveState: true,
        onSuccess: () => teamMemberBeingRemoved.value = null,
    });
};

const displayableRole = (role) => {
    return props.availableRoles.find(r => r.key === role).name;
};
</script>

<template>
    <div>
        <div v-if="userPermissions.canAddTeamMembers">
            <SectionBorder />

            <!-- Add Team Member -->
            <FormSection @submitted="addTeamMember">
                <template #title>
                    Add Team Member
                </template>

                <template #description>
                    Add a new team member to your team, allowing them to collaborate with you.
                </template>

                <template #form>
                    <div class="col-span-6">
                        <div class="max-w-xl text-sm text-gray-600 dark:text-gray-400">
                            Please provide the email address of the person you would like to add to this team.
                        </div>
                    </div>

                    <!-- Member Email -->
                    <div class="col-span-6 sm:col-span-4">
                        <InputLabel for="email" value="Email" />
                        <TextInput
                            id="email"
                            v-model="addTeamMemberForm.email"
                            type="email"
                            class="mt-1 block w-full"
                        />
                        <InputError :message="addTeamMemberForm.errors.email" class="mt-2" />
                    </div>

                    <!-- Role -->
                    <div v-if="availableRoles.length > 0" class="col-span-6 lg:col-span-4">
                        <InputLabel for="roles" value="Role" />
                        <InputError :message="addTeamMemberForm.errors.role" class="mt-2" />

                        <div class="relative z-0 mt-1 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer">
                            <button
                                v-for="(role, i) in availableRoles"
                                :key="role.key"
                                type="button"
                                class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-600"
                                :class="{'border-t border-gray-200 dark:border-gray-700 focus:border-none rounded-t-none': i > 0, 'rounded-b-none': i != Object.keys(availableRoles).length - 1}"
                                @click="addTeamMemberForm.role = role.key"
                            >
                                <div :class="{'opacity-50': addTeamMemberForm.role && addTeamMemberForm.role != role.key}">
                                    <!-- Role Name -->
                                    <div class="flex items-center">
                                        <div class="text-sm text-gray-600 dark:text-gray-400" :class="{'font-semibold': addTeamMemberForm.role == role.key}">
                                            {{ role.name }}
                                        </div>

                                        <svg v-if="addTeamMemberForm.role == role.key" class="ms-2 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                    </div>

                                    <!-- Role Description -->
                                    <div class="mt-2 text-xs text-gray-600 dark:text-gray-400 text-start">
                                        {{ role.description }}
                                    </div>
                                </div>
                            </button>
                        </div>
                    </div>
                </template>

                <template #actions>
                    <ActionMessage :on="addTeamMemberForm.recentlySuccessful" class="me-3">
                        Added.
                    </ActionMessage>

                    <PrimaryButton :class="{ 'opacity-25': addTeamMemberForm.processing }" :disabled="addTeamMemberForm.processing">
                        Add
                    </PrimaryButton>
                </template>
            </FormSection>
        </div>

        <div v-if="team.team_invitations.length > 0 && userPermissions.canAddTeamMembers">
            <SectionBorder />

            <!-- Team Member Invitations -->
            <ActionSection class="mt-10 sm:mt-0">
                <template #title>
                    Pending Team Invitations
                </template>

                <template #description>
                    These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.
                </template>

                <!-- Pending Team Member Invitation List -->
                <template #content>
                    <div class="space-y-6">
                        <div v-for="invitation in team.team_invitations" :key="invitation.id" class="flex items-center justify-between">
                            <div class="text-gray-600 dark:text-gray-400">
                                {{ invitation.email }}
                            </div>

                            <div class="flex items-center">
                                <!-- Cancel Team Invitation -->
                                <button
                                    v-if="userPermissions.canRemoveTeamMembers"
                                    class="cursor-pointer ms-6 text-sm text-red-500 focus:outline-none"
                                    @click="cancelTeamInvitation(invitation)"
                                >
                                    Cancel
                                </button>
                            </div>
                        </div>
                    </div>
                </template>
            </ActionSection>
        </div>

        <div v-if="team.users.length > 0">
            <SectionBorder />

            <!-- Manage Team Members -->
            <ActionSection class="mt-10 sm:mt-0">
                <template #title>
                    Team Members
                </template>

                <template #description>
                    All of the people that are part of this team.
                </template>

                <!-- Team Member List -->
                <template #content>
                    <div class="space-y-6">
                        <div v-for="user in team.users" :key="user.id" class="flex items-center justify-between">
                            <div class="flex items-center">
                                <img class="w-8 h-8 rounded-full object-cover" :src="user.profile_photo_url" :alt="user.name">
                                <div class="ms-4 dark:text-white">
                                    {{ user.name }}
                                </div>
                            </div>

                            <div class="flex items-center">
                                <!-- Manage Team Member Role -->
                                <button
                                    v-if="userPermissions.canUpdateTeamMembers && availableRoles.length"
                                    class="ms-2 text-sm text-gray-400 underline"
                                    @click="manageRole(user)"
                                >
                                    {{ displayableRole(user.membership.role) }}
                                </button>

                                <div v-else-if="availableRoles.length" class="ms-2 text-sm text-gray-400">
                                    {{ displayableRole(user.membership.role) }}
                                </div>

                                <!-- Leave Team -->
                                <button
                                    v-if="$page.props.auth.user.id === user.id"
                                    class="cursor-pointer ms-6 text-sm text-red-500"
                                    @click="confirmLeavingTeam"
                                >
                                    Leave
                                </button>

                                <!-- Remove Team Member -->
                                <button
                                    v-else-if="userPermissions.canRemoveTeamMembers"
                                    class="cursor-pointer ms-6 text-sm text-red-500"
                                    @click="confirmTeamMemberRemoval(user)"
                                >
                                    Remove
                                </button>
                            </div>
                        </div>
                    </div>
                </template>
            </ActionSection>
        </div>

        <!-- Role Management Modal -->
        <DialogModal :show="currentlyManagingRole" @close="currentlyManagingRole = false">
            <template #title>
                Manage Role
            </template>

            <template #content>
                <div v-if="managingRoleFor">
                    <div class="relative z-0 mt-1 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer">
                        <button
                            v-for="(role, i) in availableRoles"
                            :key="role.key"
                            type="button"
                            class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-600"
                            :class="{'border-t border-gray-200 dark:border-gray-700 focus:border-none rounded-t-none': i > 0, 'rounded-b-none': i !== Object.keys(availableRoles).length - 1}"
                            @click="updateRoleForm.role = role.key"
                        >
                            <div :class="{'opacity-50': updateRoleForm.role && updateRoleForm.role !== role.key}">
                                <!-- Role Name -->
                                <div class="flex items-center">
                                    <div class="text-sm text-gray-600 dark:text-gray-400" :class="{'font-semibold': updateRoleForm.role === role.key}">
                                        {{ role.name }}
                                    </div>

                                    <svg v-if="updateRoleForm.role == role.key" class="ms-2 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                </div>

                                <!-- Role Description -->
                                <div class="mt-2 text-xs text-gray-600 dark:text-gray-400">
                                    {{ role.description }}
                                </div>
                            </div>
                        </button>
                    </div>
                </div>
            </template>

            <template #footer>
                <SecondaryButton @click="currentlyManagingRole = false">
                    Cancel
                </SecondaryButton>

                <PrimaryButton
                    class="ms-3"
                    :class="{ 'opacity-25': updateRoleForm.processing }"
                    :disabled="updateRoleForm.processing"
                    @click="updateRole"
                >
                    Save
                </PrimaryButton>
            </template>
        </DialogModal>

        <!-- Leave Team Confirmation Modal -->
        <ConfirmationModal :show="confirmingLeavingTeam" @close="confirmingLeavingTeam = false">
            <template #title>
                Leave Team
            </template>

            <template #content>
                Are you sure you would like to leave this team?
            </template>

            <template #footer>
                <SecondaryButton @click="confirmingLeavingTeam = false">
                    Cancel
                </SecondaryButton>

                <DangerButton
                    class="ms-3"
                    :class="{ 'opacity-25': leaveTeamForm.processing }"
                    :disabled="leaveTeamForm.processing"
                    @click="leaveTeam"
                >
                    Leave
                </DangerButton>
            </template>
        </ConfirmationModal>

        <!-- Remove Team Member Confirmation Modal -->
        <ConfirmationModal :show="teamMemberBeingRemoved" @close="teamMemberBeingRemoved = null">
            <template #title>
                Remove Team Member
            </template>

            <template #content>
                Are you sure you would like to remove this person from the team?
            </template>

            <template #footer>
                <SecondaryButton @click="teamMemberBeingRemoved = null">
                    Cancel
                </SecondaryButton>

                <DangerButton
                    class="ms-3"
                    :class="{ 'opacity-25': removeTeamMemberForm.processing }"
                    :disabled="removeTeamMemberForm.processing"
                    @click="removeTeamMember"
                >
                    Remove
                </DangerButton>
            </template>
        </ConfirmationModal>
    </div>
</template>


================================================
FILE: resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
================================================
<script setup>
import { useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Jetstream/ActionMessage.vue';
import FormSection from '@/Jetstream/FormSection.vue';
import InputError from '@/Jetstream/InputError.vue';
import InputLabel from '@/Jetstream/InputLabel.vue';
import PrimaryButton from '@/Jetstream/PrimaryButton.vue';
import TextInput from '@/Jetstream/TextInput.vue';

const props = defineProps({
    team: Object,
    permissions: Object,
});

const form = useForm({
    name: props.team.name,
});

const updateTeamName = () => {
    form.put(route('teams.update', props.team), {
        errorBag: 'updateTeamName',
        preserveScroll: true,
    });
};
</script>

<template>
    <FormSection @submitted="updateTeamName">
        <template #title>
            Team Name
        </template>

        <template #description>
            The team's name and owner information.
        </template>

        <template #form>
            <!-- Team Owner Information -->
            <div class="col-span-6">
                <InputLabel value="Team Owner" />

                <div class="flex items-center mt-2">
                    <img class="w-12 h-12 rounded-full object-cover" :src="team.owner.profile_photo_url" :alt="team.owner.name">

                    <div class="ms-4 leading-tight">
                        <div class="text-gray-900 dark:text-white">{{ team.owner.name }}</div>
                        <div class="text-gray-700 dark:text-gray-300 text-sm">
                            {{ team.owner.email }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Team Name -->
            <div class="col-span-6 sm:col-span-4">
                <InputLabel for="name" value="Team Name" />

                <TextInput
                    id="name"
                    v-model="form.name"
                    type="text"
                    class="mt-1 block w-full"
                    :disabled="! permissions.canUpdateTeam"
                />

                <InputError :message="form.errors.name" class="mt-2" />
            </div>
        </template>

        <template v-if="permissions.canUpdateTeam" #actions>
            <ActionMessage :on="form.recentlySuccessful" class="me-3">
                Saved.
            </ActionMessage>

            <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                Save
            </PrimaryButton>
        </template>
    </FormSection>
</template>


================================================
FILE: resources/js/Pages/Teams/Show.vue
================================================
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import DeleteTeamForm from '@/Pages/Teams/Partials/DeleteTeamForm.vue';
import SectionBorder from '@/Jetstream/SectionBorder.vue';
import TeamMemberManager from '@/Pages/Teams/Partials/TeamMemberManager.vue';
import UpdateTeamNameForm from '@/Pages/Teams/Partials/UpdateTeamNameForm.vue';

defineProps({
    team: Object,
    availableRoles: Array,
    permissions: Object,
});
</script>

<template>
    <AppLayout title="Team Settings">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                Team Settings
            </h2>
        </template>

        <div>
            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
                <UpdateTeamNameForm :team="team" :permissions="permissions" />

                <TeamMemberManager
                    class="mt-10 sm:mt-0"
                    :team="team"
                    :available-roles="availableRoles"
                    :user-permissions="permissions"
                />

                <template v-if="permissions.canDeleteTeam && ! team.personal_team">
                    <SectionBorder />

                    <DeleteTeamForm class="mt-10 sm:mt-0" :team="team" />
                </template>
            </div>
        </div>
    </AppLayout>
</template>


================================================
FILE: resources/js/Pages/TermsOfService.vue
================================================
<template>
    <Head title="Terms of Service" />

    <div class="font-sans text-gray-900 antialiased">
        <div class="pt-4 bg-gray-100">
            <div class="min-h-screen flex flex-col items-center pt-6 sm:pt-0">
                <div>
                    <jet-authentication-card-logo />
                </div>

                <div v-html="terms" class="w-full sm:max-w-2xl mt-6 p-6 bg-white shadow-md overflow-hidden sm:rounded-lg prose">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { Head } from '@inertiajs/vue3';
import JetAuthenticationCardLogo from '@/Jetstream/AuthenticationCardLogo.vue'

const terms = `
    <h1>Terms of Service</h1>
    <p>Welcome to our application. By using our services, you agree to comply with and be bound by the following terms and conditions.</p>
    <h2>Use of Services</h2>
    <ul>
        <li>You must follow any policies made available to you within the services.</li>
        <li>You may not misuse our services, for example, by interfering with them or accessing them using a method other than the interface and the instructions that we provide.</li>
    </ul>
    <h2>Your Content</h2>
    <p>You retain ownership of any intellectual property rights that you hold in your content. When you upload or otherwise submit content to our services, you give us (and those we work with) a worldwide license to use, host, store, reproduce, modify, create derivative works, communicate, publish, publicly perform, publicly display and distribute such content.</p>
    <h2>Modifications to the Service</h2>
    <p>We are constantly changing and improving our services. We may add or remove functionalities or features, and we may suspend or stop a service altogether.</p>
    <h2>Termination</h2>
    <p>We may terminate or suspend your access to the services immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms.</p>
    <h2>Contact</h2>
    <p>If you have any questions about these Terms, please contact us.</p>
`;
</script>


================================================
FILE: resources/js/Pages/Welcome.vue
================================================
<template>
    <Head title="Welcome" />

    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
        <div v-if="canLogin" class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
            <Link v-if="$page.props.auth.user" :href="route('dashboard')" class="text-sm text-gray-700 underline">
                Dashboard
            </Link>

            <template v-else>
                <Link :href="route('login')" class="text-sm text-gray-700 underline">
                    Log in
                </Link>

                <Link v-if="canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 underline">
                    Register
                </Link>
            </template>
        </div>

        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
                <svg viewBox="0 0 651 192" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-16 w-auto text-gray-700 sm:h-20">
                    <g clip-path="url(#clip0)" fill="#EF3B2D">
                        <path d="M248.032 44.676h-16.466v100.23h47.394v-14.748h-30.928V44.676zM337.091 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.431 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162-.001 2.863-.479 5.584-1.432 8.161zM463.954 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.432 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162 0 2.863-.479 5.584-1.432 8.161zM650.772 44.676h-15.606v100.23h15.606V44.676zM365.013 144.906h15.607V93.538h26.776V78.182h-42.383v66.724zM542.133 78.182l-19.616 51.096-19.616-51.096h-15.808l25.617 66.724h19.614l25.617-66.724h-15.808zM591.98 76.466c-19.112 0-34.239 15.706-34.239 35.079 0 21.416 14.641 35.079 36.239 35.079 12.088 0 19.806-4.622 29.234-14.688l-10.544-8.158c-.006.008-7.958 10.449-19.832 10.449-13.802 0-19.612-11.127-19.612-16.884h51.777c2.72-22.043-11.772-40.877-33.023-40.877zm-18.713 29.28c.12-1.284 1.917-16.884 18.589-16.884 16.671 0 18.697 15.598 18.813 16.884h-37.402zM184.068 43.892c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002-35.648-20.524a2.971 2.971 0 00-2.964 0l-35.647 20.522-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v38.979l-29.706 17.103V24.493a3 3 0 00-.103-.776c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002L40.098 1.396a2.971 2.971 0 00-2.964 0L1.487 21.919l-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v122.09c0 1.063.568 2.044 1.489 2.575l71.293 41.045c.156.089.324.143.49.202.078.028.15.074.23.095a2.98 2.98 0 001.524 0c.069-.018.132-.059.2-.083.176-.061.354-.119.519-.214l71.293-41.045a2.971 2.971 0 001.489-2.575v-38.979l34.158-19.666a2.971 2.971 0 001.489-2.575V44.666a3.075 3.075 0 00-.106-.774zM74.255 143.167l-29.648-16.779 31.136-17.926.001-.001 34.164-19.669 29.674 17.084-21.772 12.428-43.555 24.863zm68.329-76.259v33.841l-12.475-7.182-17.231-9.92V49.806l12.475 7.182 17.231 9.92zm2.97-39.335l29.693 17.095-29.693 17.095-29.693-17.095 29.693-17.095zM54.06 114.089l-12.475 7.182V46.733l17.231-9.92 12.475-7.182v74.537l-17.231 9.921zM38.614 7.398l29.693 17.095-29.693 17.095L8.921 24.493 38.614 7.398zM5.938 29.632l12.475 7.182 17.231 9.92v79.676l.001.005-.001.006c0 .114.032.221.045.333.017.146.021.294.059.434l.002.007c.032.117.094.222.14.334.051.124.088.255.156.371a.036.036 0 00.004.009c.061.105.149.191.222.288.081.105.149.22.244.314l.008.01c.084.083.19.142.284.215.106.083.202.178.32.247l.013.005.011.008 34.139 19.321v34.175L5.939 144.867V29.632h-.001zm136.646 115.235l-65.352 37.625V148.31l48.399-27.628 16.953-9.677v33.862zm35.646-61.22l-29.706 17.102V66.908l17.231-9.92 12.475-7.182v33.841z"/>
                    </g>
                </svg>
            </div>

            <div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
                <div class="grid grid-cols-1 md:grid-cols-2">
                    <div class="p-6">
                        <div class="flex items-center">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                            <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laravel.com/docs" class="underline text-gray-900 dark:text-white">Documentation</a></div>
                        </div>

                        <div class="ml-12">
                            <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                                Laravel has wonderful, thorough documentation covering every aspect of the framework. Whether you are new to the framework or have previous experience with Laravel, we recommend reading all of the documentation from beginning to end.
                            </div>
                        </div>
                    </div>

                    <div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-t-0 md:border-l">
                        <div class="flex items-center">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                            <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laracasts.com" class="underline text-gray-900 dark:text-white">Laracasts</a></div>
                        </div>

                        <div class="ml-12">
                            <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                                Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
                            </div>
                        </div>
                    </div>

                    <div class="p-6 border-t border-gray-200 dark:border-gray-700">
                        <div class="flex items-center">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                            <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laravel-news.com/" class="underline text-gray-900 dark:text-white">Laravel News</a></div>
                        </div>

                        <div class="ml-12">
                            <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                                Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel ecosystem, including new package releases and tutorials.
                            </div>
                        </div>
                    </div>

                    <div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-l">
                        <div class="flex items-center">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            <div class="ml-4 text-lg leading-7 font-semibold text-gray-900 dark:text-white">Vibrant Ecosystem</div>
                        </div>

                        <div class="ml-12">
                            <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                                Laravel's robust library of first-party tools and libraries, such as <a href="https://forge.laravel.com" class="underline">Forge</a>, <a href="https://vapor.laravel.com" class="underline">Vapor</a>, <a href="https://nova.laravel.com" class="underline">Nova</a>, and <a href="https://envoyer.io" class="underline">Envoyer</a> help you take your projects to the next level. Pair them with powerful open source libraries like <a href="https://laravel.com/docs/billing" class="underline">Cashier</a>, <a href="https://laravel.com/docs/dusk" class="underline">Dusk</a>, <a href="https://laravel.com/docs/broadcasting" class="underline">Echo</a>, <a href="https://laravel.com/docs/horizon" class="underline">Horizon</a>, <a href="https://laravel.com/docs/sanctum" class="underline">Sanctum</a>, <a href="https://laravel.com/docs/telescope" class="underline">Telescope</a>, and more.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex justify-center mt-4 sm:items-center sm:justify-between">
                <div class="text-center text-sm text-gray-500 sm:text-left">
                    <div class="flex items-center">
                        <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" class="-mt-px w-5 h-5 text-gray-400">
                            <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>

                        <a href="https://laravel.bigcartel.com" class="ml-1 underline">
                            Shop
                        </a>

                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="ml-4 -mt-px w-5 h-5 text-gray-400">
                            <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                        </svg>

                        <a href="https://github.com/sponsors/taylorotwell" class="ml-1 underline">
                            Sponsor
                        </a>
                    </div>
                </div>

                <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
                    Laravel v{{ laravelVersion }} (PHP v{{ phpVersion }})
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .bg-gray-100 {
        background-color: #f7fafc;
        background-color: rgba(247, 250, 252, var(--tw-bg-opacity));
    }

    .border-gray-200 {
        border-color: #edf2f7;
        border-color: rgba(237, 242, 247, var(--tw-border-opacity));
    }

    .text-gray-400 {
        color: #cbd5e0;
        color: rgba(203, 213, 224, var(--tw-text-opacity));
    }

    .text-gray-500 {
        color: #a0aec0;
        color: rgba(160, 174, 192, var(--tw-text-opacity));
    }

    .text-gray-600 {
        color: #718096;
        color: rgba(113, 128, 150, var(--tw-text-opacity));
    }

    .text-gray-700 {
        color: #4a5568;
        color: rgba(74, 85, 104, var(--tw-text-opacity));
    }

    .text-gray-900 {
        color: #1a202c;
        color: rgba(26, 32, 44, var(--tw-text-opacity));
    }

    @media (prefers-color-scheme: dark) {
        .dark\:bg-gray-800 {
            background-color: #2d3748;
            background-color: rgba(45, 55, 72, var(--tw-bg-opacity));
        }

        .dark\:bg-gray-900 {
            background-color: #1a202c;
            background-color: rgba(26, 32, 44, var(--tw-bg-opacity));
        }

        .dark\:border-gray-700 {
            border-color: #4a5568;
            border-color: rgba(74, 85, 104, var(--tw-border-opacity));
        }

        .dark\:text-white {
            color: #fff;
            color: rgba(255, 255, 255, var(--tw-text-opacity));
        }

        .dark\:text-gray-400 {
            color: #cbd5e0;
            color: rgba(203, 213, 224, var(--tw-text-opacity));
        }
    }
</style>

<script>
    import { defineComponent } from 'vue'
    import { Head, Link } from '@inertiajs/vue3';

    export default defineComponent({
        components: {
            Head,
            Link,
        },

        props: {
            canLogin: Boolean,
            canRegister: Boolean,
            laravelVersion: String,
            phpVersion: String,
        }
    })
</script>


================================================
FILE: resources/js/Sources/authScreenDesigns.js
================================================
const authDesigns = [
    {
        id: 'violetDream',
        bgColor: ['bg-gradient-to-tl', 'from-violet-300','via-pink-400' , 'to-amber-300' ,'dark:bg-violet-400'],
        bgImage: {
            dark: 'https://unsplash.com/photos/DKDFBtmZSz8/download?force=true&w=1920',
            light: 'https://unsplash.com/photos/nY14Fs8pxT8/download?force=true&w=1920',
        },
        logo: {
            dark: '/img/light-logo.svg',
            light: '/img/light-logo.svg'
        },
        header: ['bg-gradient-to-tl', 'from-violet-500','to-pink-600' , 'border-b-2', 'border-purple-800/50', 'dark:border-rose-700', 'dark:from-yellow-700/75', 'dark:via-rose-800/75', 'dark:to-violet-800/50', 'text-slate-100', 'dark:text-violet-100'],
        body: ['bg-white/50','dark:bg-slate-800/50'],
        radius: 3,
        login: {
            loginButton: {
                dark: {
                    design: 'filled',
                    color: 'pink'
                },
                light: {
                    design: 'light',
                    color: 'pink'
                }
            },
            registerButton: {
                dark: {
                    design: 'link',
                    color: 'light'
                },
                light: {
                    design: 'link',
                    color: 'pink'
                }
            },
        },
        register: {
            loginButton: {
                dark: {
                    design: 'link',
                    color: 'light'
                },
                light: {
                    design: 'link',
                    color: 'pink'
                }
            },
            registerButton: {
                dark: {
                    design: 'filled',
                    color: 'pink'
                },
                light: {
                    design: 'light',
                    color: 'pink'
                }
            },
        },
        forgotPassword: {
            sendButton: {
                dark: {
                    design: 'filled',
                    color: 'pink'
                },
                light: {
                    design: 'light',
                    color: 'pink'
                }
            },
            backButton: {
                dark: {
                    design: 'link',
                    color: 'light'
                },
                light: {
                    design: 'link',
                    color: 'pink'
                }
            },
        },
        lock: {
            reLoginButton: {
                dark: {
                    design: 'filled',
                    color: 'pink'
                },
                light: {
                    design: 'light',
                    color: 'pink'
                }
            },
        }
    },
    {
        id: 'mountains',
        bgColor: ['bg-blue-500', 'dark:bg-blue-800'],
        bgImage: {
            dark: 'https://unsplash.com/photos/JgOeRuGD_Y4/download?force=true&w=1920',
            light: 'https://unsplash.com/photos/CSpjU6hYo_0/download?force=true&w=1920'
        },
        logo: {
            dark: null,
            light: '/img/brown-logo.svg'
        },
        header: ['bg-sky-100/75', 'dark:bg-red-800/20', 'text-yellow-800', 'dark:text-violet-100'],
        body: ['bg-slate-100/75','dark:bg-slate-800/50'],
        radius: 3,
        login: {
            loginButton: {
                dark: {
                    design: 'filled',
                    color: 'red'
                },
                light: {
                    design: 'filled',
                    color: 'yellow'
                }
            },
            registerButton: {
                dark: {
                    design: 'link',
                    color: 'light'
                },
                light: {
                    design: 'link',
                    color: 'yellow'
                }
            },
        },
        register: {
            loginButton: {
                dark: {
                    design: 'link',
                    color: 'light'
                },
                light: {
                    design: 'link',
                    color: 'yellow'
                }
            },
            registerButton: {
                dark: {
                    design: 'filled',
                    color: 'red'
                },
                light: {
                    design: 'filled',
                    color: 'yellow'
                }
            },
        },
        forgotPassword: {
            sendButton: {
                dark: {
                    design: 'filled',
                    color: 'red'
                },
                light: {
                    design: 'filled',
                    color: 'yellow'
                }
            },
            backButton: {
                dark: {
                    design: 'link',
                    color: 'light'
                },
                light: {
                    design: 'link',
                    color: 'yellow'
                }
            },
        },
        lock: {
            reLoginButton: {
                dark: {
                    design: 'filled',
                    color: 'red'
                },
                light: {
                    design: 'filled',
                    color: 'yellow'
                }
            },
        }
    }
]

export {authDesigns}


================================================
FILE: resources/js/Sources/icons.js
================================================
/*Import FontAwesomeIcon*/
import {library} from "@fortawesome/fontawesome-svg-core";
import {
    faTv,
    faPlug,
    faWindowRestore,
    faChartBar,
    faTable,
    faWindowMaximize,
    faLayerGroup,
    faGripHorizontal,
    faEdit,
    faRetweet,
    faClock,
    faCode,
    faQuestion,
    faCog,
    faStar,
    faChevronDown,
    faEllipsisVertical
} from "@fortawesome/free-solid-svg-icons";


library.add(
    faTv,
    faPlug,
    faWindowRestore,
    faChartBar,
    faTable,
    faWindowMaximize,
    faLayerGroup,
    faGripHorizontal,
    faEdit,
    faRetweet,
    faClock,
    faCode,
    faQuestion,
    faCog,
    faStar,
    faChevronDown,
    faEllipsisVertical
)


================================================
FILE: resources/js/Sources/mainMenuLinks.js
================================================
/* Multi-language */
import {useI18n} from "vue-i18n";
import {mainMenuTranslates} from "@/Lang/languages";
import {computed} from "vue";

export default function ({roles,permissions}) {

    const {tm} = useI18n({
        inheritLocale: true,
        messages: mainMenuTranslates
    })

    /*Main Menu Links*/
    const mainMenuLinks = computed(()=>{
        return [
            {
                id: "externalGitHubRepo",
                label:  tm("externalGitHubRepo"),
                icon: "star",
                link: "https://github.com/sinan-aydogan/anemon-laravel",
                type: "simple-link",
                target: "_blank",
                visibleFor: roles.includes('Super Admin'),
            },
            {
                id: "authPages",
                label:  tm("authPages"),
                icon: "tv",
                link: null,
                type: "dropdown",
                links: [
                    {
                        id:"authLogin",
                        label:  tm("authLogin"),
                        icon: null,
                        link: "login-app",
                        type: "route"
                    },
                    {
                        id: "authRegister",
                        label:  tm("authRegister"),
                        icon: null,
                        link: "register-app",
                        type: "route"
                    },
                    {
                        id: "authForgotPassword",
                        label:  tm("authForgotPassword"),
                        icon: null,
                        link: "forgot-password-app",
                        type: "route"
                    },
                    {
                        id: "authLockScreen",
                        label:  tm("authLockScreen"),
                        icon: null,
                        link: "lock-app",
                        type: "route"
                    },
                    {
                        id: "authProfile",
                        label:  tm("authProfile"),
                        icon: null,
                        link: "profile.show",
                        type: "route"
                    }
                ]
            },
            {
                id: "components",
                label:  tm("components"),
                icon: "plug",
                link: null,
                type: "dropdown",
                links: [
                    {
                        id: "componentAlert",
                        label:  tm("componentAlert"),
                        icon: null,
                        link: "alert",
                        type: "route"
                    },
                    {
                        id: "componentAvatar",
                        label:  tm("componentAvatar"),
                        icon: null,
                        link: "avatar",
                        type: "route"
                    },
                    {
                        id: "componentBadge",
                        label:  tm("componentBadge"),
                        icon: null,
                        link: "badge",
                        type: "route"
                    },
                    {
                        id: "componentBreadcrumb",
                        label:  tm("componentBreadcrumb"),
                        icon: null,
                        link: "breadcrumb",
                        type: "route"
                    },
                    {
                        id: "componentButton",
                        label:  tm("componentButton"),
                        icon: null,
                        link: "button",
                        type: "route"
                    },
                    {
                        id: "componentCollapsible",
                        label:  tm("componentCollapsible"),
                        icon: null,
                        link: "collapsible",
                        type: "route"
                    },
                    {
                        id: "componentDropdown",
                        label:  tm("componentDropdown"),
                        icon: null,
                        link: "dropdown",
                        type: "route"
                    },
                    {
                        id: "componentList",
                        label:  tm("componentList"),
                        icon: null,
                        link: "list",
                        type: "route"
                    },
                    {
                        id: "componentLoading",
                        label:  tm("componentLoading"),
                        icon: null,
                        link: "loading",
                        type: "route"
                    },
                    {
                        id: "componentModal",
                        label:  tm("componentModal"),
                        icon: null,
                        link: "modal",
                        type: "route"
                    },
                    {
                        id: "componentProgressBar",
                        label:  tm("componentProgressBar"),
                        icon: null,
                        link: "progress",
                        type: "route"
                    },
                    {
                        id: "componentStatisticWidget",
                        label:  tm("componentStatisticWidget"),
                        icon: "chart-bar",
                        link: "layout-statistic-widget",
                        type: "route"
                    },
                    {
                        id: "componentTab",
                        label:  tm("componentTab"),
                        icon: null,
                        link: "tab",
                        type: "route"
                    },
                    {
                        id: "componentTable",
                        label:  tm("componentTable"),
                        icon: "table",
                        link: null,
                        type: "dropdown",
                        links: [
                            {
                                id: "componentTableJson",
                                label:  tm("componentTableJson"),
                                icon: null,
                                link: "table",
                                type: "route"
                            },
                            {
                                id: "componentTableBackend",
                                label:  tm("componentTableBackend"),
                                icon: null,
                                link: "back-end-table",
                                type: "route"
                            },
                            {
                                id: "componentPagination",
                                label:  tm("componentPagination"),
                                icon: null,
                                link: "pagination",
                                type: "route"
                            }
                        ]
                    },
                    {
                        id: "componentTooltip",
                        label:  tm("componentTooltip"),
                        icon: null,
                        link: "tooltip",
                        type: "route"
                    },
                    {
                        id: "layoutElements",
                        label:  tm("layoutElements"),
                        icon: "window-maximize",
                        link: null,
                        type: "dropdown",
                        links: [
                            {
                                id: "layoutStructure",
                                label:  tm("layoutStructure"),
                                icon: "layer-group",
                                link: "layout-structure",
                                type: "route"
                            },
                            {
                                id: "layoutGrid",
                                label:  tm("layoutGrid"),
                                icon: "grip-horizontal",
                                link: "layout-grid",
                                type: "route"
                            },
                            {
                                id: "componentContentBox",
                                label:  tm("componentContentBox"),
                                icon: "window-restore",
                                link: "content-box",
                                type: "route"
                            },
                        ]
                    },
                ]
            },
            {
                id: "formElements",
                label:  tm("formElements"),
                icon: "edit",
                link: null,
                type: "dropdown",
                links: [
                    {
                        id: "formStructure",
                        label:  tm("formStructure"),
                        icon: null,
                        link: "form-structure",
                        type: "route"
                    },
                    {
                        id: "formInputGroup",
                        label:  tm("formInputGroup"),
                        icon: null,
                        link: "form-input-group",
                        type: "route"
                    },
                    {
                        id: "formSimpleInputs",
                        label:  tm("formSimpleInputs"),
                        icon: null,
                        link: "form-simple-field",
                        type: "route"
                    },
                    {
                        id: "formRepeatableInput",
                        label:  tm("formRepeatableInput"),
                        icon: "retweet",
                        link: "form-repeatable-field",
                        type: "route"
                    },
                    {
                        id: "formDateTimeInput",
                        label:  tm("formDateTimeInput"),
                        icon: "clock",
                        link: "form-date-field",
                        type: "route"
                    },
                    {
                        id: "formSelectInput",
                        label:  tm("formSelectInput"),
                        icon: null,
                        link: "form-select-input",
                        type: "route"
                    }
                ]
            },
            {
                id: "externalSources",
                label:  tm("externalSources"),
                icon: "code",
                type: "dropdown",
                links: [
                    {
                        id: "externalLaravelDocument",
                        label:  tm("externalLaravelDocument"),
                        icon: null,
                        link: "https://laravel.com/docs",
                        type: "simple-link",
                        target: "_blank"
                    },
                    {
                        id: "externalInertiaDocument",
                        label:  tm("externalInertiaDocument"),
                        icon: null,
                        link: "https://inertiajs.com/",
                        type: "simple-link",
                        target: "_blank"
                    },
                    {
                        id: "externalVuejsDocument",
                        label:  tm("externalVuejsDocument"),
                        icon: null,
                        link: "https://v3.vuejs.org/",
                        type: "simple-link",
                        target: "_blank"
                    },
                    {
                        id: "externalTailwindcssDocument",
                        label:  tm("externalTailwindcssDocument"),
                        icon: null,
                        link: "https://tailwindcss.com/docs",
                        type: "simple-link",
                        target: "_blank"
                    }
                ]
            }
        ]
    });

    /*Main Menu Footer*/
    const mainMenuFooterLinks = computed(()=>{
        return [
            {
                id: "footerHelp",
                label:  tm("footerHelp"),
                linkType: "simple-link",
                link: "https://github.com/sinan-aydogan",
                icon: "question",
                target: "_blank"
            },
            {
                id: "footerSettings",
                label:  tm("footerSettings"),
                showWhenFolded: true,
                linkType: "route",
                link: "settings",
                icon: "cog"
            }
        ]
    });

    return {mainMenuLinks, mainMenuFooterLinks}

};


================================================
FILE: resources/js/Stores/darkMode.js
================================================
import { defineStore } from "pinia";
import { onBeforeMount, ref, watch } from "vue";

export const useDarkModeStore = defineStore('darkMode',()=>{
    /*Dark Mode*/
    const darkMode = ref("auto");
    const appearingMode = ref("auto");

    /*Dark Mode: Check Local Variables*/
    onBeforeMount(() => {
        if (localStorage.theme === "dark") {
            makeDark();
            darkMode.value = "dark";
        } else if (localStorage.theme === "light") {
            makeLight();
            darkMode.value = "light";
        } else {
            makeAuto();
            darkMode.value = "auto";
        }
    });

    /*Dark Mode: Set Functions*/
    const makeDark = () => {
        document.documentElement.classList.add("dark");
        document.documentElement.classList.remove("light");
        document.documentElement.classList.remove("auto");
        appearingMode.value = "dark";
    };
    const makeLight = () => {
        document.documentElement.classList.add("light");
        document.documentElement.classList.remove("dark");
        document.documentElement.classList.remove("auto");
        appearingMode.value = "light";
    };

    const makeAuto = () => {
        let darkMedia = window.matchMedia("(prefers-color-scheme: dark)");
        const changeAutoTheme = () => {
            if (darkMedia.matches) {
                makeDark();
                appearingMode.value = "dark";
            } else {
                makeLight();
                appearingMode.value = "light";
            }
        };
        changeAutoTheme();
        darkMedia.onchange = () => {
            changeAutoTheme();
        };
    };
    const darkModeStorage = () => {
        localStorage.setItem("theme", darkMode.value);
    };
    /*Dark Mode: Watch*/
    watch(darkMode, () => {
        if (darkMode.value === "dark") {
            makeDark();
            darkModeStorage();
        } else if (darkMode.value === "light") {
            makeLight();
            darkModeStorage();
        } else {
            makeAuto();
            localStorage.setItem("theme", "auto");
        }
    });

    /* Change Dark Mode */
    const changeTheme = () => {
        if (darkMode.value === "light") {
            darkMode.value = "dark";
        } else if (darkMode.value === "dark") {
            darkMode.value = "auto";
        } else {
            darkMode.value = "light";
        }
    };
    /*Change Dark Mode with user value*/
    const changeThemeUser = (value) => {
        darkMode.value = value;
    };

    return { darkMode, appearingMode, changeTheme, changeThemeUser };
})


================================================
FILE: resources/js/Stores/displayLanguage.js
================================================
import { defineStore } from "pinia";
import { onBeforeMount, ref } from "vue";
import { useI18n } from "vue-i18n";
import { router } from "@inertiajs/vue3";

export const useDisplayLanguageStore = defineStore("displayLanguage", () => {
    /*Language Selector*/
    const loadingTranslations = ref(false);

    const { locale } = useI18n({
        useScope: "global",
        missingWarn: false,
        warnHtmlMessage: false,
        fallbackWarn: false
    });

    onBeforeMount(() => {
        if (localStorage.lang) {
            locale.value = localStorage.lang;
        }
    });
    const changeLang = (key) => {
        locale.value = key;
        localStorage.setItem("lang", key);
        router.visit(route("lang", key), {
            onStart: () => (loadingTranslations.value = true),
            onSuccess: () => (loadingTranslations.value = false),
            preserveScroll: true
        });
    };

    return { locale, loadingTranslations, changeLang };
})


================================================
FILE: resources/js/Stores/exampleStore.js
================================================
import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
  actions: {
    increment() {
      this.counter++;
    },
  },
});


================================================
FILE: resources/js/Stores/index.js
================================================
import { createPinia } from 'pinia'

export default ()=>{
    const pinia = createPinia()

    return pinia
}


================================================
FILE: resources/js/app.js
================================================
import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';

/* FontAwesome */
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import "@/Sources/icons";

/* Multi-language */
import { createI18n } from "vue-i18n";
import generalLangBg from "@/Lang/bg/general_lang_bg";
import generalLangDe from "@/Lang/de/general_lang_de";
import generalLangEn from "@/Lang/en/general_lang_en";
import generalLangFr from "@/Lang/fr/general_lang_fr";
import generalLangRu from "@/Lang/ru/general_lang_ru";
import generalLangTr from "@/Lang/tr/general_lang_tr";
import generalLangZh from "@/Lang/zh/general_lang_zh";

const i18n = createI18n({
    legacy: false,
    locale: "en",
    fallbackLocale: "en",
    fallbackRoot: "en",
    messages: {
        bg: generalLangBg,
        de: generalLangDe,
        en: generalLangEn,
        fr: generalLangFr,
        ru: generalLangRu,
        tr: generalLangTr,
        zh: generalLangZh,
    },
});

/* Highlighter */
import VueHighlightJS from 'vue3-highlightjs'

/* Pinia */
import setupPinia from './Stores';

const appName = import.meta.env.VITE_APP_NAME || 'TailAdmin';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(i18n)
            .use(setupPinia())
            .use(VueHighlightJS)
            .component("icon", FontAwesomeIcon)
            .use(ZiggyVue)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});


================================================
FILE: resources/js/bootstrap.js
================================================
import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


================================================
FILE: resources/js/config.js
================================================
/*Default Settings*/
const appConf = {
    appName: 'TailAdmin',
    catchPhrase: 'Peace at Home, Peace in the World',
    logo: {
      dark: '/img/dark-logo.svg',
      light: '/img/light-logo.svg'
    },
    logoAreaClasses: null,
    appNameClasses: null,
    logoClasses: null,
    radius: 3,
    mainMenuDesign: 'umay'
};

/*Layout Settings*/
const authScreenConf = {
    appName: null,
    logo: {
        dark: null,
        light: null,
    },
    logoAreaClasses: ['flex', 'flex-col', 'justify-center', 'items-center', 'space-x-2', 'min-w-[25rem]'],
    appNameClasses: ['text-3xl', 'font-semibold'],
    logoClasses: ['w-12', 'text-white', 'h-auto'],
    showDesignChanger: true,
    showDarkModeSelector: true,
    showLanguageSelector: true,
};

const mainMenuConf = {
    /*Logo Area*/
    appName: null,
    catchPhrase: null,
    umay: {
        logo: {
            dark: '/img/dark-logo.svg',
            light: '/img/dark-logo.svg',
        },
        logoAreaRadius: null,
        logoAreaClasses: ['flex', 'flex-col', 'justify-center', 'items-center', 'space-x-6', 'bg-blue-500'],
        appNameClasses: ['text-6xl', 'font-semibold', 'text-white'],
        logoClasses: ['w-10', 'text-white', 'h-auto'],
        /*Menu*/
        menuRadius: 3,
        rootLinkClasses: {
            activeBg: ['border', 'border-slate-400/30'],
            normal: ['hover:bg-sky-200', 'hover:text-sky-800'],
            active: ['text-white', 'bg-sky-500/75', 'hover:bg-sky-400', 'hover:text-sky-800'],
        },
        secondLinkClasses: {
            activeBg: [],
            normal: ['hover:bg-sky-200/10', 'hover:text-sky-400','hover:text-slate-800'],
            active: ['bg-slate-600', 'hover:bg-sky-500/20'],
        },
        thirdLinkClasses: {
            activeBg: ['border', 'bg-emerald-500/20', 'border-slate-500/50'],
            normal: ['hover:bg-emerald-200', 'hover:text-emerald-800'],
            active: ['text-white', 'bg-emerald-500', 'hover:bg-emerald-600'],
        },
    },
    abay: {
        logo: {
            dark: '/img/rose-logo.svg',
            light: '/img/rose-logo.svg',
        },
        logoAreaRadius: null,
        logoAreaClasses: ['flex', 'flex-col', 'justify-center', 'items-center', 'space-x-6', 'bg-blue-500'],
        appNameClasses: ['text-6xl', 'font-semibold', 'text-white'],
        logoClasses: ['w-10', 'text-white', 'h-auto'],
        /*Menu*/
        menuRadius: 3,
        rootLinkClasses: {
            activeBg: ['border', 'border-slate-400/30'],
            normal: ['hover:bg-sky-200', 'hover:text-sky-800'],
            active: ['text-white', 'bg-sky-500/75', 'hover:bg-sky-400', 'hover:text-sky-800'],
        },
        secondLinkClasses: {
            activeBg: [],
            normal: ['hover:bg-sky-200/10', 'hover:text-sky-400','hover:text-slate-800'],
            active: ['text-sky-400', 'bg-slate-600', 'hover:bg-sky-500/20'],
        },
        thirdLinkClasses: {
            activeBg: ['border', 'bg-emerald-500/20', 'border-slate-500/50'],
            normal: ['hover:bg-emerald-200', 'hover:text-emerald-800'],
            active: ['text-white', 'bg-emerald-500', 'hover:bg-emerald-600'],
        },
    }
};

const topBarConf = {
    radius: null,
    languageSelector: true,
    darkModeSelector: true,
    searchPlaceHolderText: 'type and search'
};

const footerConf = {
    visible: true,
    content: "<a\n" +
        "              class=\"text-blue-600 hover:underline\"\n" +
        "              href=\"https://tailadmin.dev/\"\n" +
        "              target=\"_blank\"\n" +
        "            >\n" +
        "              TailAdmin v2\n" +
        "              </a>\n" +
        "            <span>by</span>\n" +
        "            <a\n" +
        "              class=\"text-teal-400 hover:underline\"\n" +
        "              href=\"https://github.com/sinan-aydogan\"\n" +
        "              target=\"_blank\"\n" +
        "            >\n" +
        "              Sinan AYDOĞAN\n" +
        "            </a>"
};

/*Module Settings*/
const alertConf = {
    design: 'filled',
    color: 'light',
    radius: null,
    closeable: false,
    timer: 4000
};

const avatarConf = {
    defaultPhotoSrc: '/img/samples/dummyAvatar.svg',
    size: 3,
    radius: null,
};

const badgeConf = {
    color: 'light',
    design: 'filled',
    radius: 5,
};

const formContentConf = {
    radius: null
};

const inputDateConf = {
    radius: null
};

export {
    appConf,
    /*Layout*/
    authScreenConf,
    mainMenuConf,
    topBarConf,
    footerConf,
    /*Component*/
    alertConf,
    avatarConf,
    badgeConf,
    formContentConf,
    inputDateConf
}



================================================
FILE: resources/js/language.js
================================================
const messages = {
    en: {
        component: {
            input: {
                select:{
                    select: 'Select',
                    search: 'Search...',
                    manyResults: 'You\'re looking {showingMaxOptions} options from {totalOptions}, please search...',
                    addSource: 'Please add a source'
                }
            }
        },
        auth: {},
        topMenu: {
            notification: {},
            userMenu: {
                manageAccount: "Manage Account",
                manageTeam: "Manage Team",
                switchTeams: "Switch Team",
                language: "Language",
                darkMode: "Dark Mode",
                profile: "Profile",
                api: "API Tokens",
                teamSettings: "Team Settings",
                createNewTeam: "Create New Team",
                auto: "Auto",
                dark: "Dark",
                light: "Light",
                logout: "Logout"
            }
        },
        leftMenu: {
            authPages: {
                authPages: "Auth Pages",
                login: "Login",
                register: "Register",
                forgotPassword: "Forgot Password",
                lockScreen: "Lock Screen",
                profile: "Profile"
            },
            components: {
                components: "Components",
                alert: "Alert",
                avatar: "Avatar",
                badge: "Badge",
                breadcrumb: "Breadcrumb",
                button: "Button",
                collapsible: "Collapsible",
                dropdown: "Dropdown",
                list: "List",
                loading: "Loading",
                modal: "Modal",
                pagination: "Pagination",
                popover: "Popover",
                progressBar: "Progress Bar",
                statisticWidget: "Statistic Widget",
                tab: "Tab",
                tableJson: "Table(JSON)",
                tableBackend: "Table(BackEnd)",
                tooltip: "Tooltip"
            },
            layoutElements: {
                layoutElements: "Layout Elements",
                layoutStructure: "Layout Structure",
                grid: "Grid",
                contentCard: "Content Card",
                tailwindcssDocument: "TailwindCSS Document"
            },
            formElements: {
                formElements: "Form Elements",
                formStructure: "Form Structure",
                inputGroup: "Input Group",
                simpleInputs: "Simple Inputs",
                repeatableInput: "Repeatable Input",
                inlineRepeatableInput: "Inline Repeat. Input",
                dateTimeInput: "Date/Time Input",
                selectInput: "Select Input",
                multiSelectInput: "Multi Select Input"
            },
            footer: {
                help: "Help",
                settings: "Settings"
            }
        },
        title: {
            page: {
                welcomeMessage: "Welcome to TailAdmin"
            }
        },
        message: {},
        error: {},
        global: {},
        demoContent: {
            topMenu: {
                pendingWorks: "Pending Works",
                activeTodos: "2 To-Do's",
                calibrationTasks: "5 Calibration Task's",
                unreadMessages: "9 Messages"
            },
            selectTest: 'Search user'
        }
    },
    tr: {
        component: {
            input: {
                select:{
                    select: 'Seç',
                    search: 'Ara...',
                    manyResults: '{totalOptions} kayıttan {showingMaxOptions} tanesi gösteriliyor, lütfen arama yapınız...',
                    addSource: 'Lütfen kaynak yükleyin'
                }
            }
        },
        auth: {},
        topMenu: {
            notification: {},
            userMenu: {
                manageAccount: "Hesap Yönetimi",
                manageTeam: "Takım Yönetimi",
                switchTeams: "Takım Değiştir",
                language: "Dil",
                darkMode: "Koyu Mod",
                profile: "Profil",
                api: "API Anahtarları",
                teamSettings: "Takım Ayarları",
                createNewTeam: "Yeni Takım Oluştur",
                auto: "Otomatik",
                dark: "Koyu",
                light: "Açık",
                logout: "Çıkış"
            }
        },
        leftMenu: {
            authPages: {
                authPages: "Üyelik Sayfaları",
                login: "Giriş",
                register: "Kayıt",
                forgotPassword: "Şifremi Unuttum",
                lockScreen: "Kilit Ekranı",
                profile: "Profil"
            },
            components: {
                components: "Bileşenler",
                alert: "Uyarı Kutusu/Alert",
                avatar: "Profil Fotoğrafı/Avatar",
                badge: "Rozet/Badge",
                breadcrumb: "Breadcrumb",
                button: "Düğme",
                collapsible: "Açılır Liste/Collapsible",
                dropdown: "Açılır Düğme/Dropdown",
                list: "Liste",
                loading: "Yükleniyor Ekranı",
                modal: "Açılır Pencere/Modal",
                pagination: "Sayfalandırma",
                popover: "Bilgi Baloncuğu/Popover",
                progressBar: "İlerleme Çubuğu/Progress",
                statisticWidget: "İstatistik Kutusu",
                tab: "Sekmeli İçerik/Tab",
                tableJson: "Tablo (Kullanıcı)",
                tableBackend: "Tablo (Sunucu)",
                tooltip: "Tooltip"
            },
            layoutElements: {
                layoutElements: "Yerleşim Bileşenleri",
                layoutStructure: "Yerleşim Yapısı",
                grid: "Izgara/Grid",
                contentCard: "Content Card",
                tailwindcssDocument: "TailwindCSS Döküman"
            },
            formElements: {
                formElements: "Form Bileşenleri",
                formStructure: "Form Yapısı",
                inputGroup: "Input Grup",
                simpleInputs: "Klasik Inputlar",
                repeatableInput: "Tekrarlı Input",
                inlineRepeatableInput: "Düzenlenebilir Tek. Input",
                dateTimeInput: "Zaman/Saat Input",
                selectInput: "Select Input",
                multiSelectInput: "Multi Select Input"
            },
            footer: {
                help: "Yardım",
                settings: "Ayarlar"
            }
        },
        title: {
            page: {
                welcomeMessage: "TailAdmin'e Hoşgeldiniz"
            }
        },
        message: {},
        error: {},
        global: {},
        demoContent: {
            topMenu: {
                pendingWorks: "Bekleyen İşler",
                activeTodos: "2 Atanmış Görev",
                calibrationTasks: "5 Kalibrasyon İşlemi",
                unreadMessages: "9 Mesaj"
            },
            selectTest: 'Kulllanıcı ara'
        }
    },
    component: {
        form: {
            select: {
                addSOurce: 'Please add a options source'
            }
        }
    }
};

export default messages;


================================================
FILE: resources/js/ssr.js
================================================
import { createSSRApp, h } from 'vue';
import { renderToString } from '@vue/server-renderer';
import { createInertiaApp } from '@inertiajs/vue3';
import createServer from '@inertiajs/vue3/server';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
        setup({ App, props, plugin }) {
            return createSSRApp({ render: () => h(App, props) })
                .use(plugin)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                });
        },
    })
);


================================================
FILE: resources/lang/bg/actions.php
================================================
<?php

declare(strict_types=1);

return [
    'accept'          => 'Приеми',
    'action'          => 'Действие',
    'actions'         => 'Действия',
    'add'             => 'Добавете',
    'admin'           => 'Админ',
    'agree'           => 'Съгласен',
    'archive'         => 'Архив',
    'assign'          => 'Присвояване',
    'associate'       => 'Сътрудник',
    'attach'          => 'Прикрепете',
    'browse'          => 'Прегледайте',
    'cancel'          => 'Отказ',
    'choose'          => 'Избирам',
    'choose_file'     => 'Изберете файл',
    'choose_image'    => 'Изберете Изображение',
    'click_to_copy'   => 'Кликнете, за да копирате',
    'close'           => 'Близо',
    'collapse'        => 'Свиване',
    'collapse_all'    => 'Свиване на всички',
    'comment'         => 'Коментирайте',
    'confirm'         => 'Потвърдете',
    'connect'         => 'Свържете се',
    'create'          => 'Създавайте',
    'delete'          => 'Изтрий',
    'detach'          => 'Отделяне',
    'details'         => 'Подробности',
    'disable'         => 'Деактивиране',
    'discard'         => 'Изхвърлете',
    'done'            => 'Свършен',
    'down'            => 'Надолу',
    'duplicate'       => 'Дубликат',
    'edit'            => 'редактиране',
    'enable'          => 'Активирайте',
    'expand'          => 'Разширяване',
    'expand_all'      => 'Разгънете всички',
    'explanation'     => 'Обяснение',
    'export'          => 'Експортиране',
    'file'            => 'Файл',
    'files'           => 'файлове',
    'go_home'         => 'Прибирай се',
    'hide'            => 'Крия',
    'home'            => 'У дома',
    'image'           => 'Изображение',
    'impersonate'     => 'Имитирайте се',
    'impersonation'   => 'Имитиране',
    'import'          => 'Импортиране',
    'introduction'    => 'Въведение',
    'like'            => 'като',
    'load'            => 'Заредете',
    'localize'        => 'Локализирайте',
    'log_in'          => 'Влизам',
    'log_out'         => 'Излез от профила си',
    'named'           => [
        'add'       => 'Добавете :name',
        'choose'    => 'Изберете :name',
        'create'    => 'Създайте :name',
        'delete'    => 'Изтрий :name',
        'duplicate' => 'Дубликат: име',
        'edit'      => 'Редактиране :name',
        'export'    => 'Export :name',
        'hide'      => 'Скриване :name',
        'import'    => 'Импортиране :name',
        'new'       => 'Ново :name',
        'restore'   => 'Възстановяване :name',
        'save'      => 'Спестете :name',
        'search'    => 'Търсене :name',
        'show'      => 'Покажи :name',
        'update'    => 'Актуализация :name',
        'view'      => 'Преглед :name',
    ],
    'new'             => 'Нов',
    'no'              => 'Не',
    'open'            => 'Отворете',
    'open_website'    => 'Отворете на уебсайта',
    'preview'         => 'Преглед',
    'price'           => 'Цена',
    'record'          => 'Записвайте',
    'restore'         => 'Възстанови',
    'save'            => 'Запазване',
    'save_and_close'  => 'Запазване и затваряне',
    'save_and_return' => 'Запазване и връщане',
    'search'          => 'Търсене',
    'select'          => 'Изберете',
    'select_all'      => 'Избери всички',
    'send'            => 'Изпратете',
    'settings'        => 'Настройки',
    'show'            => 'Покажи',
    'show_all'        => 'Покажи всички',
    'sign_in'         => 'Впиши се',
    'solve'           => 'Решете',
    'start'           => 'Започнете',
    'stop'            => 'Спри се',
    'submit'          => 'Изпращане',
    'subscribe'       => 'Абонирай се',
    'switch'          => 'Превключване',
    'switch_to_role'  => 'Превключване към роля',
    'tag'             => 'Етикет',
    'tags'            => 'Етикети',
    'target_link'     => [
        'blank'  => 'Отворете в нов прозорец',
        'parent' => 'Отворете в родителска рамка',
        'self'   => 'Отворете в текущия прозорец',
        'top'    => 'Отворете в най-горната рамка',
    ],
    'translate'       => 'Превеждай',
    'translate_it'    => 'Преведи го',
    'unpack'          => 'Разопаковайте',
    'unsubscribe'     => 'Отписване',
    'up'              => 'нагоре',
    'update'          => 'Актуализация',
    'user'            => 'Потребител',
    'view'            => 'Преглед',
    'yes'             => 'да',
];


================================================
FILE: resources/lang/bg/auth.php
================================================
<?php

declare(strict_types=1);

return [
    'failed'   => 'Неуспешно удостоверяване на потребител.',
    'password' => 'Паролата е грешна.',
    'throttle' => 'Твърде много опити за вход. Моля, опитайте отново след :seconds секунди.',
];


================================================
FILE: resources/lang/bg/http-statuses.php
================================================
<?php

declare(strict_types=1);

return [
    '0'            => 'Неизвестна грешка',
    '100'          => 'продължи',
    '101'          => 'Протоколи за превключване',
    '102'          => 'Обработка',
    '200'          => 'Добре',
    '201'          => 'Създаден',
    '202'          => 'Приема се',
    '203'          => 'Неавторитетна информация',
    '204'          => 'Няма съдържание',
    '205'          => 'Нулиране на съдържанието',
    '206'          => 'Частично съдържание',
    '207'          => 'Мултистатус',
    '208'          => 'Вече е докладвано',
    '226'          => 'Използван съм',
    '300'          => 'Множество възможности за избор',
    '301'          => 'преместен за постоянно',
    '302'          => 'Намерени',
    '303'          => 'Вижте Други',
    '304'          => 'Непроменено',
    '305'          => 'Използвай прокси',
    '307'          => 'Временно пренасочване',
    '308'          => 'Постоянно пренасочване',
    '400'          => 'Неправилна заявка',
    '401'          => 'Неразрешено',
    '402'          => 'изисква се плащане',
    '403'          => 'Забранен',
    '404'          => 'Не е намерено',
    '405'          => 'Методът не е разрешен',
    '406'          => 'Неприемливо',
    '407'          => 'Изисква се удостоверяване на прокси',
    '408'          => 'Искането е изтекло',
    '409'          => 'Конфликт',
    '410'          => 'Си отиде',
    '411'          => 'Необходима дължина',
    '412'          => 'Неуспешно предварително условие',
    '413'          => 'Твърде голям полезен товар',
    '414'          => 'Твърде дълъг URI',
    '415'          => 'Неподдържан тип медия',
    '416'          => 'Диапазонът не е задоволим',
    '417'          => 'Неуспешно очакване',
    '418'          => 'Аз съм чайник',
    '419'          => 'Сесията е изтекла',
    '421'          => 'Неправилно насочена заявка',
    '422'          => 'Необработваем субект',
    '423'          => 'Заключено',
    '424'          => 'Неуспешна зависимост',
    '425'          => 'Твърде рано',
    '426'          => 'Изисква се надграждане',
    '428'          => 'Изисква се предварително условие',
    '429'          => 'Твърде много заявки',
    '431'          => 'Заглавните полета на заявката са твърде големи',
    '444'          => 'Връзката затворена без отговор',
    '449'          => 'Опитайте отново с',
    '451'          => 'Недостъпно поради правни причини',
    '499'          => 'Затворена заявка от клиента',
    '500'          => 'Вътрешна грешка на сървъра',
    '501'          => 'Не е изпълнено',
    '502'          => 'лош изход',
    '503'          => 'режим на поддръжка',
    '504'          => 'Изчакване на шлюза',
    '505'          => 'HTTP версията не се поддържа',
    '506'          => 'Вариантът също се договаря',
    '507'          => 'Недостатъчно място за съхранение',
    '508'          => 'Открит цикъл',
    '509'          => 'Лимитът на честотната лента е надвишен',
    '510'          => 'Не е удължен',
    '511'          => 'Изисква се мрежово удостоверяване',
    '520'          => 'Неизвестна грешка',
    '521'          => 'Уеб сървърът не работи',
    '522'          => 'Времето за изчакване на връзката изтече',
    '523'          => 'Произходът е недостижим',
    '524'          => 'Възникна изчакване',
    '525'          => 'Неуспешно SSL ръкостискане',
    '526'          => 'Невалиден SSL сертификат',
    '527'          => 'Грешка с релсов пистолет',
    '598'          => 'Грешка при изчакване при четене на мрежата',
    '599'          => 'Грешка при изчакване на мрежовата връзка',
    'unknownError' => 'Неизвестна грешка',
];


================================================
FILE: resources/lang/bg/pagination.php
================================================
<?php

declare(strict_types=1);

return [
    'next'     => 'Напред &raquo;',
    'previous' => '&laquo; Назад',
];


================================================
FILE: resources/lang/bg/passwords.php
================================================
<?php

declare(strict_types=1);

return [
    'reset'     => 'Паролата е нулирана!',
    'sent'      => 'Изпратено е напомняне за вашата парола!',
    'throttled' => 'Моля изчакайте, преди да опитате отново.',
    'token'     => 'Този токен за нулиране на парола е невалиден.',
    'user'      => 'Потребител с такъв e-mail адрес не може да бъде открит.',
];


================================================
FILE: resources/lang/bg/validation.php
================================================
<?php

declare(strict_types=1);

return [
    'accepted'             => 'Трябва да приемете :attribute.',
    'accepted_if'          => 'Полето :attribute трябва да е прието, когато :other е :value.',
    'active_url'           => 'Полето :attribute не е валиден URL адрес.',
    'after'                => 'Полето :attribute трябва да бъде дата след :date.',
    'after_or_equal'       => 'Полето :attribute трябва да бъде дата след или равна на :date.',
    'alpha'                => 'Полето :attribute трябва да съдържа само букви.',
    'alpha_dash'           => 'Полето :attribute трябва да съдържа само букви, цифри, долна черта и тире.',
    'alpha_num'            => 'Полето :attribute трябва да съдържа само букви и цифри.',
    'array'                => 'Полето :attribute трябва да бъде масив.',
    'ascii'                => ':Attribute-те трябва да съдържат само еднобайтови буквено-цифрови знаци и символи.',
    'attached'             => 'Този номер :attribute вече е прикачен.',
    'before'               => 'Полето :attribute трябва да бъде дата преди :date.',
    'before_or_equal'      => 'Полето :attribute трябва да бъде дата преди или равна на :date.',
    'between'              => [
        'array'   => 'Полето :attribute трябва да има между :min - :max елемента.',
        'file'    => 'Полето :attribute трябва да бъде между :min и :max килобайта.',
        'numeric' => 'Полето :attribute трябва да бъде между :min и :max.',
        'string'  => 'Полето :attribute трябва да бъде между :min и :max знака.',
    ],
    'boolean'              => 'Полето :attribute трябва да съдържа Да или Не',
    'can'                  => 'Полето :attribute съдържа неразрешена стойност.',
    'confirmed'            => 'Полето :attribute не е потвърдено.',
    'contains'             => 'The :attribute field is missing a required value.',
    'current_password'     => 'Паролата е неправилна.',
    'date'                 => 'Полето :attribute не е валидна дата.',
    'date_equals'          => ':Attribute трябва да бъде дата, еднаква с :date.',
    'date_format'          => 'Полето :attribute не е във формат :format.',
    'decimal'              => ':Attribute-те трябва да имат :decimal знака след десетичната запетая.',
    'declined'             => ':Attribute-те трябва да бъдат отхвърлени.',
    'declined_if'          => ':Attribute трябва да се отклони, когато :other е :value.',
    'different'            => 'Полетата :attribute и :other трябва да са различни.',
    'digits'               => 'Полето :attribute трябва да има :digits цифри.',
    'digits_between'       => 'Полето :attribute трябва да има между :min и :max цифри.',
    'dimensions'           => 'Невалидни размери за снимка :attribute.',
    'distinct'             => 'Данните в полето :attribute се дублират.',
    'doesnt_end_with'      => ':Attribute-те може да не завършват с едно от следните: :values.',
    'doesnt_start_with'    => ':Attribute-те може да не започват с едно от следните: :values.',
    'email'                => 'Полето :attribute е в невалиден формат.',
    'ends_with'            => ':Attribute трябва да завършва с една от следните стойности: :values.',
    'enum'                 => 'Избраните :attribute са невалидни.',
    'exists'               => 'Избранато поле :attribute вече съществува.',
    'extensions'           => 'Полето :attribute трябва да има едно от следните разширения: :values.',
    'file'                 => 'Полето :attribute трябва да бъде файл.',
    'filled'               => 'Полето :attribute е задължително.',
    'gt'                   => [
        'array'   => ':Attribute трябва да разполага с повече от :value елемента.',
        'file'    => ':Attribute трябва да бъде по-голяма от :value килобайта.',
        'numeric' => ':Attribute трябва да бъде по-голяма от :value.',
        'string'  => ':Attribute трябва да бъде по-голяма от :value знака.',
    ],
    'gte'                  => [
        'array'   => ':Attribute трябва да разполага с :value елемента или повече.',
        'file'    => ':Attribute трябва да бъде по-голяма от или равна на :value килобайта.',
        'numeric' => ':Attribute трябва да бъде по-голяма от или равна на :value.',
        'string'  => ':Attribute трябва да бъде по-голяма от или равна на :value знака.',
    ],
    'hex_color'            => 'Полето :attribute трябва да е с валиден шестнадесетичен цвят.',
    'image'                => 'Полето :attribute трябва да бъде изображение.',
    'in'                   => 'Избраното поле :attribute е невалидно.',
    'in_array'             => 'Полето :attribute не съществува в :other.',
    'integer'              => 'Полето :attribute трябва да бъде цяло число.',
    'ip'                   => 'Полето :attribute трябва да бъде IP адрес.',
    'ipv4'                 => 'Полето :attribute трябва да бъде IPv4 адрес.',
    'ipv6'                 => 'Полето :attribute трябва да бъде IPv6 адрес.',
    'json'                 => 'Полето :attribute трябва да бъде JSON низ.',
    'list'                 => 'Полето :attribute трябва да е списък.',
    'lowercase'            => ':Attribute трябва да са малки букви.',
    'lt'                   => [
        'array'   => ':Attribute трябва да разполага с по-малко от :value елемента.',
        'file'    => ':Attribute трябва да бъде по-малка от :value килобайта.',
        'numeric' => ':Attribute трябва да бъде по-малка от :value.',
        'string'  => ':Attribute трябва да бъде по-малка от :value знака.',
    ],
    'lte'                  => [
        'array'   => ':Attribute не трябва да разполага с повече от :value елемента.',
        'file'    => ':Attribute трябва да бъде по-малка от или равна на :value килобайта.',
        'numeric' => ':Attribute трябва да бъде по-малка от или равна на :value.',
        'string'  => ':Attribute трябва да бъде по-малка от или равна на :value знака.',
    ],
    'mac_address'          => ':Attribute трябва да е валиден MAC адрес.',
    'max'                  => [
        'array'   => 'Полето :attribute трябва да има по-малко от :max елемента.',
        'file'    => 'Полето :attribute трябва да бъде по-малко от :max килобайта.',
        'numeric' => 'Полето :attribute трябва да бъде по-малко от :max.',
        'string'  => 'Полето :attribute трябва да бъде по-малко от :max знака.',
    ],
    'max_digits'           => ':Attribute-те не трябва да имат повече от :max цифри.',
    'mimes'                => 'Полето :attribute трябва да бъде файл от тип: :values.',
    'mimetypes'            => 'Полето :attribute трябва да бъде файл от тип: :values.',
    'min'                  => [
        'array'   => 'Полето :attribute трябва има минимум :min елемента.',
        'file'    => 'Полето :attribute трябва да бъде минимум :min килобайта.',
        'numeric' => 'Полето :attribute трябва да бъде минимум :min.',
        'string'  => 'Полето :attribute трябва да бъде минимум :min знака.',
    ],
    'min_digits'           => ':Attribute-те трябва да имат поне :min цифри.',
    'missing'              => 'Полето :attribute трябва да липсва.',
    'missing_if'           => 'Полето :attribute трябва да липсва, когато :other е :value.',
    'missing_unless'       => 'Полето :attribute трябва да липсва, освен ако :other не е :value.',
    'missing_with'         => 'Полето :attribute трябва да липсва, когато :values присъства.',
    'missing_with_all'     => 'Полето :attribute трябва да липсва, когато има :values.',
    'multiple_of'          => 'Числото :attribute трябва да бъде кратно на :value',
    'not_in'               => 'Избраното поле :attribute е невалидно.',
    'not_regex'            => 'Форматът на :attribute е невалиден.',
    'numeric'              => 'Полето :attribute трябва да бъде число.',
    'password'             => [
        'letters'       => ':Attribute-те трябва да съдържат поне една буква.',
        'mixed'         => ':Attribute-те трябва да съдържат поне една главна и една малка буква.',
        'numbers'       => ':Attribute-те трябва да съдържат поне едно число.',
        'symbols'       => ':Attribute-те трябва да съдържат поне един символ.',
        'uncompromised' => 'Дадените :attribute се появиха при изтичане на данни. Моля, изберете различни :attribute.',
    ],
    'present'              => 'Полето :attribute трябва да съествува.',
    'present_if'           => 'Полето :attribute трябва да присъства, когато :other е :value.',
    'present_unless'       => 'Полето :attribute трябва да присъства, освен ако :other не е :value.',
    'present_with'         => 'Полето :attribute трябва да присъства, когато присъства :values.',
    'present_with_all'     => 'Полето :attribute трябва да присъства, когато има :values.',
    'prohibited'           => 'Поле :attribute е забранено.',
    'prohibited_if'        => 'Полето :attribute е забранено, когато :other е равно на :value.',
    'prohibited_unless'    => 'Полето :attribute е забранено, освен ако :other не е в :values.',
    'prohibits'            => 'Полето :attribute изключва наличието на :other.',
    'regex'                => 'Полето :attribute е в невалиден формат.',
    'relatable'            => 'Този :attribute може да не е свързан с този ресурс.',
    'required'             => 'Полето :attribute е задължително.',
    'required_array_keys'  => 'Полето :attribute трябва да съдържа записи за: :values.',
    'required_if'          => 'Полето :attribute се изисква, когато :other е :value.',
    'required_if_accepted' => 'Полето :attribute е задължително, когато се приема :other.',
    'required_if_declined' => 'The :attribute field is required when :other is declined.',
    'required_unless'      => 'Полето :attribute се изисква, освен ако :other не е в :values.',
    'required_with'        => 'Полето :attribute се изисква, когато :values има стойност.',
    'required_with_all'    => 'Полето :attribute е задължително, когато :values имат стойност.',
    'required_without'     => 'Полето :attribute се изисква, когато :values няма стойност.',
    'required_without_all' => 'Полето :attribute се изисква, когато никое от полетата :values няма стойност.',
    'same'                 => 'Полетата :attribute и :other трябва да съвпадат.',
    'size'                 => [
        'array'   => 'Полето :attribute трябва да има :size елемента.',
        'file'    => 'Полето :attribute трябва да бъде :size килобайта.',
        'numeric' => 'Полето :attribute трябва да бъде :size.',
        'string'  => 'Полето :attribute трябва да бъде :size знака.',
    ],
    'starts_with'          => ':Attribute трябва да започва с едно от следните: :values.',
    'string'               => 'Полето :attribute трябва да бъде знаков низ.',
    'timezone'             => 'Полето :attribute трябва да съдържа валидна часова зона.',
    'ulid'                 => ':Attribute трябва да е валиден ULID.',
    'unique'               => 'Полето :attribute вече съществува.',
    'uploaded'             => 'Неуспешно качване на :attribute.',
    'uppercase'            => ':Attribute трябва да са главни букви.',
    'url'                  => 'Полето :attribute е в невалиден формат.',
    'uuid'                 => ':Attribute трябва да бъде валиден UUID.',
    'attributes'           => [
        'address'                  => 'адрес',
        'affiliate_url'            => 'URL адрес на партньор',
        'age'                      => 'възраст',
        'amount'                   => 'количество',
        'announcement'             => 'съобщение',
        'area'                     => '■ площ',
        'audience_prize'           => 'награда на публиката',
        'available'                => 'достъпен',
        'birthday'                 => 'рожден ден',
        'body'                     => 'тяло',
        'city'                     => 'град',
        'compilation'              => 'компилация',
        'concept'                  => 'концепция',
        'conditions'               => 'условия',
        'content'                  => 'съдържание',
        'country'                  => 'държава',
        'cover'                    => 'Покрийте',
        'created_at'               => 'създаден в',
        'creator'                  => 'създател',
        'currency'                 => 'валута',
        'current_password'         => 'Настояща парола',
        'customer'                 => 'клиент',
        'date'                     => 'дата',
        'date_of_birth'            => 'дата на раждане',
        'dates'                    => 'дати',
        'day'                      => 'ден',
        'deleted_at'               => 'изтрит на',
        'description'              => 'описание',
        'display_type'             => 'тип дисплей',
        'district'                 => 'окръг',
        'duration'                 => 'продължителност',
        'email'                    => 'e-mail',
        'excerpt'                  => 'откъс',
        'filter'                   => 'филтър',
        'finished_at'              => 'завърши на',
        'first_name'               => 'име',
        'gender'                   => 'пол',
        'grand_prize'              => 'Голяма награда',
        'group'                    => 'група',
        'hour'                     => 'час',
        'image'                    => 'образ',
        'image_desktop'            => 'изображение на работния плот',
        'image_main'               => 'основно изображение',
        'image_mobile'             => 'мобилно изображение',
        'images'                   => 'изображения',
        'is_audience_winner'       => 'е победител сред публиката',
        'is_hidden'                => 'е скрито',
        'is_subscribed'            => 'е абониран',
        'is_visible'               => 'се вижда',
        'is_winner'                => 'е победител',
        'items'                    => 'елементи',
        'key'                      => 'ключ',
        'last_name'                => 'фамилия',
        'lesson'                   => 'урок',
        'line_address_1'           => 'адрес на линия 1',
        'line_address_2'           => 'адрес на линия 2',
        'login'                    => 'Влизам',
        'message'                  => 'съобщение',
        'middle_name'              => 'презиме',
        'minute'                   => 'минута',
        'mobile'                   => 'gsm',
        'month'                    => 'месец',
        'name'                     => 'име',
        'national_code'            => 'национален код',
        'number'                   => 'номер',
        'password'                 => 'парола',
        'password_confirmation'    => 'Потвърждение на парола',
        'phone'                    => 'телефон',
        'photo'                    => 'снимка',
        'portfolio'                => 'портфолио',
        'postal_code'              => 'пощенски код',
        'preview'                  => 'предварителен преглед',
        'price'                    => 'цена',
        'product_id'               => 'идентификация на продукта',
        'product_uid'              => 'UID на продукта',
        'product_uuid'             => 'UUID на продукта',
        'promo_code'               => 'промо код',
        'province'                 => 'провинция',
        'quantity'                 => 'количество',
        'reason'                   => 'причина',
        'recaptcha_response_field' => 'рекапча',
        'referee'                  => 'рефер',
        'referees'                 => 'рефери',
        'reject_reason'            => 'отхвърлете разума',
        'remember'                 => 'помня',
        'restored_at'              => 'възстановен при',
        'result_text_under_image'  => 'текст на резултата под изображението',
        'role'                     => 'роля',
        'rule'                     => 'правило',
        'rules'                    => 'правила',
        'second'                   => 'секунда',
        'sex'                      => 'пол',
        'shipment'                 => 'пратка',
        'short_text'               => 'кратък текст',
        'size'                     => 'размер',
        'skills'                   => 'умения',
        'slug'                     => 'плужек',
        'specialization'           => 'специализация',
        'started_at'               => 'започна в',
        'state'                    => 'състояние',
        'status'                   => 'състояние',
        'street'                   => 'улица',
        'student'                  => 'студент',
        'subject'                  => 'заглавие',
        'tag'                      => 'етикет',
        'tags'                     => 'етикети',
        'teacher'                  => 'учител',
        'terms'                    => 'условия',
        'test_description'         => 'описание на теста',
        'test_locale'              => 'тест локал',
        'test_name'                => 'име на теста',
        'text'                     => 'текст',
        'time'                     => 'време',
        'title'                    => 'заглавие',
        'type'                     => 'Тип',
        'updated_at'               => 'актуализиран на',
        'user'                     => 'потребител',
        'username'                 => 'потребител',
        'value'                    => 'стойност',
        'year'                     => 'година',
    ],
];


================================================
FILE: resources/lang/bg.json
================================================
{
    "(and :count more error)": "(и още :count грешки)",
    "(and :count more errors)": "(и още :count грешки)|(и още :count грешки)|(и още :count грешки)",
    "A new verification link has been sent to the email address you provided in your profile settings.": "Нова връзка за потвърждение е изпратена на имейл адреса, който сте предоставили в настройките на вашия профил.",
    "A new verification link has been sent to your email address.": "Нова връзка за потвърждение е изпратена на вашия имейл адрес.",
    "A Timeout Occurred": "Възникна изчакване",
    "Accept": "Приеми",
    "Accept Invitation": "Приемане На Поканата",
    "Accepted": "Приема се",
    "Action": "Действие",
    "Actions": "Действия",
    "Add": "Добави",
    "Add :name": "Добавете :name",
    "Add a new team member to your team, allowing them to collaborate with you.": "Добавете нов член на екипа към екипа си, за да може да си сътрудничи с вас.",
    "Add additional security to your account using two factor authentication.": "Добавете допълнителна сигурност към профила си чрез двуфакторно удостоверяване.",
    "Add Team Member": "Добавяне на член на екипа",
    "Added.": "Добавено.",
    "Admin": "Админ",
    "Administrator": "Администратор",
    "Administrator users can perform any action.": "Администраторите могат да извършват всякакви действия.",
    "Agree": "Съгласен",
    "All of the people that are part of this team.": "Всички хора, които са част от този екип.",
    "All rights reserved.": "Всички права запазени.",
    "Already registered?": "Вече си се регистрирал?",
    "Already Reported": "Вече е докладвано",
    "API Token": "API Ключ",
    "API Token Permissions": "API Ключ Права",
    "API Tokens": "API Ключове",
    "API tokens allow third-party services to authenticate with our application on your behalf.": "API ключовете позволяват на услугите на трети страни да бъдат удостоверени в нашето приложение от ваше име.",
    "Archive": "Архив",
    "Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.": "Сигурни ли сте, че искате да изтриете този екип? След като екипа бъде изтрит, всичките му ресурси и данни ще бъдат изтрити завинаги.",
    "Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.": "Сигурни ли сте, че искате да изтриете профила си? След като профилът ви бъде изтрит, всичките му ресурси и данни ще бъдат изтрити безвъзвратно. Моля, въведете паролата си, за да потвърдите, че искате да изтриете завинаги профила си.",
    "Are you sure you would like to delete this API token?": "Сигурни ли сте, че искате да премахнете този API ключ?",
    "Are you sure you would like to leave this team?": "Сигурен ли си, че искаш да напуснеш този екип?",
    "Are you sure you would like to remove this person from the team?": "Сигурни ли сте, че искате да премахнете този човек от екипа?",
    "Assign": "Присвояване",
    "Associate": "Сътрудник",
    "Attach": "Прикачи",
    "Bad Gateway": "лош изход",
    "Bad Request": "Неправилна заявка",
    "Bandwidth Limit Exceeded": "Лимитът на честотната лента е надвишен",
    "Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.": "Преди да продължите, можете ли да потвърдите своя имейл адрес, като щракнете върху връзката, която току-що ви изпратихме? Ако не сте получили имейла, с удоволствие ще ви изпратим друг.",
    "Browse": "Прегледайте",
    "Browser Sessions": "Браузърни сесии",
    "Cancel": "Отмени",
    "Choose": "Избери",
    "Choose :name": "Изберете :name",
    "Choose File": "Изберете файл",
    "Choose Image": "Изберете Изображение",
    "Click here to re-send the verification email.": "Щракнете тук, за да изпратите повторно имейла за потвърждение.",
    "Click to copy": "Кликнете, за да копирате",
    "Client Closed Request": "Затворена заявка от клиента",
    "Close": "Затвори",
    "Code": "Код",
    "Collapse": "Свиване",
    "Collapse All": "Свиване на всички",
    "Comment": "Коментирайте",
    "Confirm": "Потвърди",
    "Confirm Password": "Потвърдете паролата",
    "Conflict": "Конфликт",
    "Connect": "Свържете се",
    "Connection Closed Without Response": "Връзката затворена без отговор",
    "Connection Timed Out": "Времето за изчакване на връзката изтече",
    "Continue": "продължи",
    "Create": "Създай",
    "Create :name": "Създайте :name",
    "Create a new team to collaborate with others on projects.": "Създайте нов екип, с който да работите заедно по проекти.",
    "Create Account": "създаване на профил",
    "Create API Token": "Създаване на API ключ",
    "Create New Team": "Създаване на нов екип",
    "Create Team": "Създаване на екип",
    "Created": "Създаден",
    "Created.": "Създаден.",
    "Current Password": "Текуща парола",
    "Dashboard": "Табло",
    "Delete": "Изтрий",
    "Delete :name": "Изтрий :name",
    "Delete Account": "Изтриване на акаунт",
    "Delete API Token": "Изтриване на API Ключ",
    "Delete Team": "Изтриване на отбор",
    "Detach": "Разкачи",
    "Details": "Информация",
    "Disable": "Изключвам",
    "Discard": "Изхвърлете",
    "Done": "Свършен",
    "Done.": "Направя.",
    "Down": "Надолу",
    "Duplicate": "Дубликат",
    "Duplicate :name": "Дубликат: име",
    "Edit": "Редактирам",
    "Edit :name": "Редактиране :name",
    "Edit Profile": "Редактирай профил",
    "Editor": "Редактор",
    "Editor users have the ability to read, create, and update.": "Редокторите имат възможност да четат, създават и актуализират.",
    "Email": "Имейл",
    "Email Password Reset Link": "Връзка за нулиране на паролата за електронна поща",
    "Enable": "Включа",
    "Ensure your account is using a long, random password to stay secure.": "Уверете се, че профилът ви използва дълга случайна парола, за да остане в безопасност.",
    "errors": "грешки",
    "Expand": "Разширяване",
    "Expand All": "Разгънете всички",
    "Expectation Failed": "Неуспешно очакване",
    "Explanation": "Обяснение",
    "Export": "Експортиране",
    "Export :name": "Export :name",
    "Failed Dependency": "Неуспешна зависимост",
    "File": "Файл",
    "Files": "файлове",
    "Finish enabling two factor authentication.": "Завършете активирането на двуфакторно удостоверяване.",
    "For your security, please confirm your password to continue.": "За вашата сигурност, моля потвърдете паролата си, за да продължите.",
    "Forbidden": "Забранено",
    "Forgot your password?": "Забравихте паролата си?",
    "Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.": "Забравихте паролата си? Няма проблем. Просто ни кажете имейл адреса си и ще ви изпратим връзка за нулиране на паролата, която ви позволява да изберете нова.",
    "Found": "Намерени",
    "Gateway Timeout": "Изчакване на шлюза",
    "Go Home": "Отиди в началото.",
    "Go to page :page": "Отидете на страница :page",
    "Gone": "Си отиде",
    "Great! You have accepted the invitation to join the :team team.": "Страхотно! Приехте поканата да се присъедините към екипа на :team.",
    "Hello!": "Здравей!",
    "Hide": "Крия",
    "Hide :name": "Скриване :name",
    "Home": "У дома",
    "HTTP Version Not Supported": "HTTP версията не се поддържа",
    "I agree to the :terms_of_service and :privacy_policy": "Съгласен съм със :terms_of_service и :privacy_policy",
    "I'm a teapot": "Аз съм чайник",
    "If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.": "Ако е необходимо, можете да излезете от всички други сесии на браузъра на всичките си устройства. Някои от последните ви сесии са изброени по-долу; този списък обаче може да не е изчерпателен. Ако смятате, че профилът Ви е компрометиран, трябва да актуализирате и паролата си.",
    "If you already have an account, you may accept this invitation by clicking the button below:": "Ако вече имате профил, можете да приемете тази покана, като кликнете върху бутона по-долу:",
    "If you did not create an account, no further action is required.": "Ако не сте създали профил, не са необходими допълнителни действия.",
    "If you did not expect to receive an invitation to this team, you may discard this email.": "Ако не сте очаквали да получите покана за този отбор, можете да се откажете от това писмо.",
    "If you did not request a password reset, no further action is required.": "Ако не сте поискали Нулиране на паролата, не са необходими допълнителни действия.",
    "If you do not have an account, you may create one by clicking the button below. After creating an account, you may click the invitation acceptance button in this email to accept the team invitation:": "Ако нямате профил, можете да го създадете, като кликнете върху бутона по-долу. След като създадете профил, можете да кликнете върху бутона за приемане на покана в този имейл, за да приемете поканата на екипа:",
    "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "Ако имате проблеми с натискането на бутона \":actiontext\", копирайте и поставете URL адреса по-долу\nкъм вашия уеб браузър:",
    "IM Used": "Използван съм",
    "Image": "Изображение",
    "Impersonate": "Имитирайте се",
    "Impersonation": "Имитиране",
    "Import": "Импортиране",
    "Import :name": "Импортиране :name",
    "Insufficient Storage": "Недостатъчно място за съхранение",
    "Internal Server Error": "Вътрешна грешка на сървъра",
    "Introduction": "Въведение",
    "Invalid JSON was returned from the route.": "От маршрута е върнат невалиден JSON.",
    "Invalid SSL Certificate": "Невалиден SSL сертификат",
    "Last active": "Последно активен",
    "Last used": "Последно използван",
    "Leave": "Напускам",
    "Leave Team": "Напускане на екипа",
    "length": "length",
    "Length Required": "Необходима дължина",
    "Like": "като",
    "Load": "Заредете",
    "Localize": "Локализирайте",
    "Location": "Местоположение",
    "Locked": "Заключено",
    "Log In": "Влизане",
    "Log in": "Влез",
    "Log Out": "Излез",
    "Log Out Other Browser Sessions": "Излезте от други браузърни сесии",
    "Login": "Упълномощя",
    "Logout": "Излизане",
    "Loop Detected": "Открит цикъл",
    "Maintenance Mode": "режим на поддръжка",
    "Manage Account": "Управление на профила",
    "Manage and log out your active sessions on other browsers and devices.": "Управлявайте активни сесии и излизайте от тях в други браузъри и устройства.",
    "Manage API Tokens": "Управление на API Жетони",
    "Manage Role": "Управление на ролята",
    "Manage Team": "Управление на екип",
    "Method Not Allowed": "Методът не е разрешен",
    "Misdirected Request": "Неправилно насочена заявка",
    "Moved Permanently": "преместен за постоянно",
    "Multi-Status": "Мултистатус",
    "Multiple Choices": "Множество възможности за избор",
    "Name": "Име",
    "Network Authentication Required": "Изисква се мрежово удостоверяване",
    "Network Connect Timeout Error": "Грешка при изчакване на мрежовата връзка",
    "Network Read Timeout Error": "Грешка при изчакване при четене на мрежата",
    "New": "Нов",
    "New :name": "Ново :name",
    "New Password": "Парола",
    "No": "Не.",
    "No Content": "Няма съдържание",
    "Non-Authoritative Information": "Неавторитетна информация",
    "Not Acceptable": "Неприемливо",
    "Not Extended": "Не е удължен",
    "Not Found": "Не е намерен",
    "Not Implemented": "Не е изпълнено",
    "Not Modified": "Непроменено",
    "of": "от",
    "OK": "Добре",
    "Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.": "След като екип бъде изтрит, всичките му ресурси и данни ще бъдат изтрити завинаги. Преди да изтриете тази команда, моля, качете всички данни или информация за този екип, които искате да запазите.",
    "Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.": "След като профилът ви бъде изтрит, всичките му ресурси и данни ще бъдат изтрити безвъзвратно. Преди да изтриете профила си, моля, качете всички данни или информация, които искате да запазите.",
    "Open": "Отворете",
    "Open in a current window": "Отворете в текущия прозорец",
    "Open in a new window": "Отворете в нов прозорец",
    "Open in a parent frame": "Отворете в родителска рамка",
    "Open in the topmost frame": "Отворете в най-горната рамка",
    "Open on the website": "Отворете на уебсайта",
    "Origin Is Unreachable": "Произходът е недостижим",
    "Page Expired": "Страницата е просрочена",
    "Pagination Navigation": "Навигация на страници",
    "Partial Content": "Частично съдържание",
    "Password": "Парола",
    "Payload Too Large": "Твърде голям полезен товар",
    "Payment Required": "изисква се плащане",
    "Pending Team Invitations": "Чакащи Покани На Екипа",
    "Permanent Redirect": "Постоянно пренасочване",
    "Permanently delete this team.": "Изтрийте тази команда завинаги.",
    "Permanently delete your account.": "Изтрийте профила си завинаги.",
    "Permissions": "Разрешение",
    "Photo": "Снимка",
    "Please click the button below to verify your email address.": "Моля, кликнете върху бутона по-долу, за да потвърдите имейл адреса си.",
    "Please confirm access to your account by entering one of your emergency recovery codes.": "Моля, потвърдете достъпа до профила си, като въведете един от кодовете за възстановяване при бедствия.",
    "Please confirm access to your account by entering the authentication code provided by your authenticator application.": "Моля, потвърдете достъпа до профила си, като въведете кода за удостоверяване, предоставен от вашето приложение за удостоверяване.",
    "Please copy your new API token. For your security, it won't be shown again.": "Моля, копирайте новия си API знак. За вашата безопасност, тя вече няма да бъде показана.",
    "Please enter your password to confirm you would like to log out of your other browser sessions across all of your devices.": "Моля, въведете паролата си, за да потвърдите, че искате да излезете от други сесии на браузъра на всичките си устройства.",
    "Please provide the email address of the person you would like to add to this team.": "Моля, посочете имейл адреса на лицето, което искате да добавите към тази команда.",
    "Precondition Failed": "Неуспешно предварително условие",
    "Precondition Required": "Изисква се предварително условие",
    "Preview": "Визуализация",
    "Price": "Цена",
    "Privacy Policy": "Политика за поверителност",
    "Processing": "Обработка",
    "Profile": "Профил",
    "Profile Information": "Информация за профила",
    "Proxy Authentication Required": "Изисква се удостоверяване на прокси",
    "Railgun Error": "Грешка с релсов пистолет",
    "Range Not Satisfiable": "Диапазонът не е задоволим",
    "Record": "Записвайте",
    "Recovery Code": "Код за възстановяване",
    "Regards": "С уважение",
    "Regenerate Recovery Codes": "Регенериране на кодовете за възстановяване",
    "Register": "Регистрирам",
    "Remember me": "Запомни ме.",
    "Remove": "Премахвам",
    "Remove Photo": "Премахни снимка",
    "Remove Team Member": "Премахни член на екипа",
    "Request Header Fields Too Large": "Заглавните полета на заявката са твърде големи",
    "Request Timeout": "Искането е изтекло",
    "Resend Verification Email": "Изпрати повторно писмо за потвърждение",
    "Reset Content": "Нулиране на съдържанието",
    "Reset Password": "парола",
    "Reset Password Notification": "Известие за нулиране на паролата",
    "Restore": "Възстановявам",
    "Restore :name": "Възстановяване :name",
    "results": "резултат",
    "Retry With": "Опитайте отново с",
    "Role": "Роля",
    "Save": "Запазя",
    "Save & Close": "Запазване и затваряне",
    "Save & Return": "Запазване и връщане",
    "Save :name": "Спестете :name",
    "Saved.": "Запазено.",
    "Search": "Търсене",
    "Search :name": "Търсене :name",
    "See Other": "Вижте Други",
    "Select": "Избери",
    "Select A New Photo": "Избери нова снимка",
    "Select All": "Избери всички",
    "Send": "Изпратете",
    "Server Error": "Грешка",
    "Service Unavailable": "Услугата е недостъпна",
    "Session Has Expired": "Сесията е изтекла",
    "Settings": "Настройки",
    "Setup Key": "Ключ за настройка",
    "Show": "Покажи",
    "Show :name": "Покажи :name",
    "Show All": "Покажи всички",
    "Show Recovery Codes": "Показване На Кодове За Възстановяване",
    "Showing": "Импресия",
    "Sign In": "Впиши се",
    "Solve": "Решете",
    "SSL Handshake Failed": "Неуспешно SSL ръкостискане",
    "Start": "Започнете",
    "Stop": "Спри се",
    "Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.": "Съхранявайте тези кодове за възстановяване в сигурен мениджър на пароли. Те могат да бъдат използвани за възстановяване на достъпа до профила ви, ако вашето устройство за двуфакторно удостоверяване е загубено.",
    "Submit": "Изпращане",
    "Subscribe": "Абонирай се",
    "Switch": "Превключване",
    "Switch Teams": "Превключване на команди",
    "Switch To Role": "Превключване към роля",
    "Switching Protocols": "Протоколи за превключване",
    "Tag": "Етикет",
    "Tags": "Етикети",
    "Team Details": "Подробности за екипа",
    "Team Invitation": "Покана за екип",
    "Team Members": "Екип",
    "Team Name": "Име на екип",
    "Team Owner": "Собственикът на отбора",
    "Team Settings": "Настройки на команда",
    "Temporary Redirect": "Временно пренасочване",
    "Terms of Service": "условие",
    "The :attribute must be a valid role.": ":Attribute трябва да бъде валидна роля.",
    "The :attribute must be at least :length characters and contain at least one number.": ":Attribute трябва да съдържа най-малко :length знака и да съдържа поне един номер.",
    "The :attribute must be at least :length characters and contain at least one special character and one number.": ":Attribute трябва да съдържа най-малко :length знака и да съдържа най-малко един специален символ и един номер.",
    "The :attribute must be at least :length characters and contain at least one special character.": ":Attribute трябва да съдържа най-малко :length знака и да съдържа поне един специален символ.",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one number.": ":Attribute трябва да съдържа най-малко :length знака и да съдържа най-малко един главен символ и едно число.",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one special character.": ":Attribute трябва да съдържа най-малко :length знака и да съдържа най-малко един главен символ и един специален символ.",
    "The :attribute must be at least :length characters and contain at least one uppercase character, one number, and one special character.": ":Attribute трябва да съдържа най-малко :length символа и да съдържа най-малко един главен символ, един номер и един специален символ.",
    "The :attribute must be at least :length characters and contain at least one uppercase character.": ":Attribute трябва да съдържа най-малко :length знака и най-малко един главни букви.",
    "The :attribute must be at least :length characters.": ":Attribute трябва да съдържа най-малко :length знака.",
    "The given data was invalid.": "Дадените данни бяха невалидни.",
    "The password is incorrect.": "Паролата е неправилна.",
    "The provided password does not match your current password.": "Предоставената парола не съответства на текущата ви парола.",
    "The provided password was incorrect.": "Предоставената парола е грешна.",
    "The provided two factor authentication code was invalid.": "Предоставеният код за двуфакторно удостоверяване е невалиден.",
    "The provided two factor recovery code was invalid.": "Предоставеният двуфакторен код за възстановяване е невалиден.",
    "The response is not a streamed response.": "Отговорът не е поточен отговор.",
    "The response is not a view.": "Отговорът не е изглед.",
    "The team's name and owner information.": "Име на екипа и информация за собственика.",
    "These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.": "Тези хора бяха поканени във вашия екип и получиха покана по имейл. Те могат да се присъединят към екипа, като приемат покана по имейл.",
    "This action is unauthorized.": "Това действие е неразрешено.",
    "This device": "Това устройство",
    "This is a secure area of the application. Please confirm your password before continuing.": "Това е безопасна област на приложение. Моля, потвърдете паролата си, преди да продължите.",
    "This password does not match our records.": "Тази парола не съвпада с нашите записи.",
    "This password reset link will expire in :count minutes.": "Тази връзка за нулиране на паролата изтича след :count минути.",
    "This user already belongs to the team.": "Този потребител вече принадлежи на екипа.",
    "This user has already been invited to the team.": "Този потребител вече е поканен в екипа.",
    "to": "към",
    "To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.": "За да завършите активирането на двуфакторно удостоверяване, сканирайте следния QR код, като използвате приложението за удостоверяване на телефона си или въведете ключа за настройка и предоставете генерирания OTP код.",
    "Toggle navigation": "Превключване на навигацията",
    "Token Name": "Име на символ",
    "Too Early": "Твърде рано",
    "Too Many Requests": "Твърде много заявки",
    "Translate": "Превеждай",
    "Translate It": "Преведи го",
    "Two Factor Authentication": "Двуфакторно удостоверяване",
    "Two factor authentication is now enabled. Scan the following QR code using your phone's authenticator application or enter the setup key.": "Двуфакторното удостоверяване вече е активирано. Сканирайте следния QR код, като използвате приложението за удостоверяване на телефона си или въведете ключа за настройка.",
    "Unauthorized": "Неоторизиран",
    "Unavailable For Legal Reasons": "Недостъпно поради правни причини",
    "Unknown": "Неизвестен",
    "Unknown Error": "Неизвестна грешка",
    "Unpack": "Разопаковайте",
    "Unprocessable Entity": "Необработваем субект",
    "Unsubscribe": "Отписване",
    "Unsupported Media Type": "Неподдържан тип медия",
    "Up": "нагоре",
    "Update": "Актуализация",
    "Update :name": "Актуализация :name",
    "Update Password": "Обновяване на паролата",
    "Update your account's profile information and email address.": "Актуализирайте информацията за профила на профила и имейл адреса си.",
    "Upgrade Required": "Изисква се надграждане",
    "URI Too Long": "Твърде дълъг URI",
    "Use a recovery code": "Използвайте кода за възстановяване",
    "Use an authentication code": "Използвайте кода за удостоверяване",
    "Use Proxy": "Използвай прокси",
    "User": "Потребител",
    "Variant Also Negotiates": "Вариантът също се договаря",
    "Verify Email Address": "Потвърди имейл адреса",
    "View": "Виж",
    "View :name": "Преглед :name",
    "We were unable to find a registered user with this email address.": "Не успяхме да намерим регистриран потребител с този имейл адрес.",
    "Web Server is Down": "Уеб сървърът не работи",
    "When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.": "Ако е активирано двуфакторно удостоверяване, по време на удостоверяването ще бъдете подканени да въведете защитен произволен символ. Можете да получите този знак от приложението Google Authenticator на телефона си.",
    "Whoops!": "Опа!",
    "Whoops! Something went wrong.": "Опа! Нещо се обърка.",
    "Yes": "А",
    "You are receiving this email because we received a password reset request for your account.": "Получавате този имейл, защото сте заявили искане за нулиране на паролата за профила ви.",
    "You have been invited to join the :team team!": "Вие сте поканени да се присъедините към екип :team!",
    "You have enabled two factor authentication.": "Включихте двуфакторно удостоверяване.",
    "You have not enabled two factor authentication.": "Не сте активирали двуфакторното удостоверяване.",
    "You may accept this invitation by clicking the button below:": "Можете да приемете тази покана, кликайки бутона по-долу:",
    "You may delete any of your existing tokens if they are no longer needed.": "Можете да изтриете някой от съществуващите си символи, ако вече не са необходими.",
    "You may not delete your personal team.": "Нямате право да изтривате личната си команда.",
    "You may not leave a team that you created.": "Не можете да напуснете създадения от вас екип.",
    "Your email address is unverified.": "Вашият имейл адрес не е потвърден."
}

================================================
FILE: resources/lang/de/actions.php
================================================
<?php

declare(strict_types=1);

return [
    'accept'          => 'Akzeptieren',
    'action'          => 'Aktion',
    'actions'         => 'Aktionen',
    'add'             => 'Hinzufügen',
    'admin'           => 'Administrator',
    'agree'           => 'Zustimmen',
    'archive'         => 'Archiv',
    'assign'          => 'Zuordnen',
    'associate'       => 'Assoziieren',
    'attach'          => 'Anfügen',
    'browse'          => 'Durchsuche',
    'cancel'          => 'Stornieren',
    'choose'          => 'Wählen',
    'choose_file'     => 'Datei wählen',
    'choose_image'    => 'Wählen Sie Bild',
    'click_to_copy'   => 'Klicken Sie zum Kopieren',
    'close'           => 'Schließen',
    'collapse'        => 'Zusammenbruch',
    'collapse_all'    => 'Alles reduzieren',
    'comment'         => 'Kommentar',
    'confirm'         => 'Bestätigen',
    'connect'         => 'Verbinden',
    'create'          => 'Erstellen',
    'delete'          => 'Löschen',
    'detach'          => 'Ablösen',
    'details'         => 'Einzelheiten',
    'disable'         => 'Deaktivieren',
    'discard'         => 'Verwerfen',
    'done'            => 'Erledigt',
    'down'            => 'Runter',
    'duplicate'       => 'Duplikat',
    'edit'            => 'Bearbeiten',
    'enable'          => 'Aktivieren',
    'expand'          => 'Expandieren',
    'expand_all'      => 'Alle erweitern',
    'explanation'     => 'Erläuterung',
    'export'          => 'Export',
    'file'            => 'Datei',
    'files'           => 'Dateien',
    'go_home'         => 'Nach Hause gehen',
    'hide'            => 'Verstecken',
    'home'            => 'Heim',
    'image'           => 'Bild',
    'impersonate'     => 'Imitieren',
    'impersonation'   => 'Identitätswechsel',
    'import'          => 'Importieren',
    'introduction'    => 'Einführung',
    'like'            => 'Wie',
    'load'            => 'Belastung',
    'localize'        => 'Lokalisieren',
    'log_in'          => 'Anmeldung',
    'log_out'         => 'Ausloggen',
    'named'           => [
        'add'       => 'Addiere :name',
        'choose'    => 'Wählen Sie :name',
        'create'    => 'Erstellen Sie :name',
        'delete'    => ':name löschen',
        'duplicate' => 'Duplikat :name',
        'edit'      => 'Bearbeiten :name',
        'export'    => 'Export :name',
        'hide'      => ':name ausblenden',
        'import'    => 'Importieren Sie :name',
        'new'       => 'Neu :name',
        'restore'   => ':name wiederherstellen',
        'save'      => 'Sparen Sie :name',
        'search'    => 'Suche :name',
        'show'      => ':name anzeigen',
        'update'    => 'Update :name',
        'view'      => 'Ansicht :name',
    ],
    'new'             => 'Neu',
    'no'              => 'NEIN',
    'open'            => 'Offen',
    'open_website'    => 'Auf der Website öffnen',
    'preview'         => 'Vorschau',
    'price'           => 'Preis',
    'record'          => 'Aufzeichnen',
    'restore'         => 'Wiederherstellen',
    'save'            => 'Speichern',
    'save_and_close'  => 'Speichern und schließen',
    'save_and_return' => 'Speichern und zurückgeben',
    'search'          => 'Suchen',
    'select'          => 'Wählen',
    'select_all'      => 'Wählen Sie Alle',
    'send'            => 'Schicken',
    'settings'        => 'Einstellungen',
    'show'            => 'Zeigen',
    'show_all'        => 'Zeige alles',
    'sign_in'         => 'Anmelden',
    'solve'           => 'Lösen',
    'start'           => 'Start',
    'stop'            => 'Stoppen',
    'submit'          => 'Einreichen',
    'subscribe'       => 'Abonnieren',
    'switch'          => 'Schalten',
    'switch_to_role'  => 'Zur Rolle wechseln',
    'tag'             => 'Etikett',
    'tags'            => 'Stichworte',
    'target_link'     => [
        'blank'  => 'In einem neuen Fenster öffnen',
        'parent' => 'In einem übergeordneten Frame öffnen',
        'self'   => 'In einem aktuellen Fenster öffnen',
        'top'    => 'Im obersten Rahmen öffnen',
    ],
    'translate'       => 'Übersetzen',
    'translate_it'    => 'Übersetze es',
    'unpack'          => 'Auspacken',
    'unsubscribe'     => 'Abbestellen',
    'up'              => 'Hoch',
    'update'          => 'Aktualisieren',
    'user'            => 'Benutzer',
    'view'            => 'Sicht',
    'yes'             => 'Ja',
];


================================================
FILE: resources/lang/de/auth.php
================================================
<?php

declare(strict_types=1);

return [
    'failed'   => 'Diese Kombination aus Zugangsdaten wurde nicht in unserer Datenbank gefunden.',
    'password' => 'Das Passwort ist falsch.',
    'throttle' => 'Zu viele Loginversuche. Versuchen Sie es bitte in :seconds Sekunden nochmal.',
];


================================================
FILE: resources/lang/de/http-statuses.php
================================================
<?php

declare(strict_types=1);

return [
    '0'            => 'Unbekannter Fehler',
    '100'          => 'Weiter',
    '101'          => 'Schaltprotokolle',
    '102'          => 'Verarbeitung',
    '200'          => 'OK',
    '201'          => 'Erstellt',
    '202'          => 'Akzeptiert',
    '203'          => 'Nicht maßgebende Informationen',
    '204'          => 'Kein Inhalt',
    '205'          => 'Inhalt zurücksetzen',
    '206'          => 'Teilinhalt',
    '207'          => 'Multistatus',
    '208'          => 'Bereits gemeldet',
    '226'          => 'IM verwendet',
    '300'          => 'Mehrfachauswahl',
    '301'          => 'Permanent verschoben',
    '302'          => 'Gefunden',
    '303'          => 'Andere sehen',
    '304'          => 'Nicht modifiziert',
    '305'          => 'Proxy verwenden',
    '307'          => 'Temporäre Weiterleitung',
    '308'          => 'Permanente Weiterleitung',
    '400'          => 'Schlechte Anfrage',
    '401'          => 'Nicht autorisiert',
    '402'          => 'Zahlung erforderlich',
    '403'          => 'Verboten',
    '404'          => 'Seite nicht gefunden',
    '405'          => 'Methode nicht erlaubt',
    '406'          => 'Nicht annehmbar',
    '407'          => 'Proxy-Authentifizierung erforderlich',
    '408'          => 'Zeitüberschreitung anfordern',
    '409'          => 'Konflikt',
    '410'          => 'Gegangen',
    '411'          => 'Länge erforderlich',
    '412'          => 'Vorbedingung fehlgeschlagen',
    '413'          => 'Nutzlast zu groß',
    '414'          => 'URI zu lang',
    '415'          => 'Nicht unterstützter Medientyp',
    '416'          => 'Bereich nicht erfüllbar',
    '417'          => 'Erwartung gescheitert',
    '418'          => 'Ich bin eine Teekanne',
    '419'          => 'Sitzung ist abgelaufen',
    '421'          => 'Fehlgeleitete Anfrage',
    '422'          => 'Unverfügbare Entität',
    '423'          => 'Gesperrt',
    '424'          => 'Fehlgeschlagene Abhängigkeit',
    '425'          => 'Zu früh',
    '426'          => 'Upgrade erforderlich',
    '428'          => 'Voraussetzung erforderlich',
    '429'          => 'Zu viele Anfragen',
    '431'          => 'Kopfzeilenfelder zu groß anfordern',
    '444'          => 'Verbindung ohne Antwort geschlossen',
    '449'          => 'Wiederhole mit',
    '451'          => 'Aus rechtlichen Gründen nicht verfügbar',
    '499'          => 'Client-Closed-Request',
    '500'          => 'Interner Serverfehler',
    '501'          => 'Nicht implementiert',
    '502'          => 'Schlechtes Tor',
    '503'          => 'Wartungsmodus',
    '504'          => 'Gateway-Zeitüberschreitung',
    '505'          => 'HTTP Version nicht unterstützt',
    '506'          => 'Variante verhandelt auch',
    '507'          => 'Ungenügende Speicherung',
    '508'          => 'Schleife erkannt',
    '509'          => 'Bandbreitengrenze überschritten',
    '510'          => 'Nicht erweitert',
    '511'          => 'Netzwerkauthentifizierung erforderlich',
    '520'          => 'Unbekannter Fehler',
    '521'          => 'Webserver ist ausgefallen',
    '522'          => 'Verbindung abgelaufen',
    '523'          => 'Ursprung ist nicht erreichbar',
    '524'          => 'Ein Timeout ist aufgetreten',
    '525'          => 'SSL Handshake fehlgeschlagen',
    '526'          => 'Ungültiges SSL-Zertifikat',
    '527'          => 'Railgun-Fehler',
    '598'          => 'Zeitüberschreitungsfehler beim Lesen des Netzwerks',
    '599'          => 'Zeitüberschreitungsfehler bei Netzwerkverbindung',
    'unknownError' => 'Unbekannter Fehler',
];


================================================
FILE: resources/lang/de/pagination.php
================================================
<?php

declare(strict_types=1);

return [
    'next'     => 'Weiter &raquo;',
    'previous' => '&laquo; Zurück',
];


================================================
FILE: resources/lang/de/passwords.php
================================================
<?php

declare(strict_types=1);

return [
    'reset'     => 'Das Passwort wurde zurückgesetzt!',
    'sent'      => 'E-Mail zum Zurücksetzen des Passworts wurde gesendet!',
    'throttled' => 'Bitte warten Sie, bevor Sie es erneut versuchen.',
    'token'     => 'Der Passwort-Wiederherstellungsschlüssel ist ungültig oder abgelaufen.',
    'user'      => 'Es konnte leider kein Nutzer mit dieser E-Mail-Adresse gefunden werden.',
];


================================================
FILE: resources/lang/de/validation.php
================================================
<?php

declare(strict_types=1);

return [
    'accepted'             => ':Attribute muss akzeptiert werden.',
    'accepted_if'          => ':Attribute muss akzeptiert werden, wenn :other :value ist.',
    'active_url'           => ':Attribute ist keine gültige Internet-Adresse.',
    'after'                => ':Attribute muss ein Datum nach :date sein.',
    'after_or_equal'       => ':Attribute muss ein Datum nach :date oder gleich :date sein.',
    'alpha'                => ':Attribute darf nur aus Buchstaben bestehen.',
    'alpha_dash'           => ':Attribute darf nur aus Buchstaben, Zahlen, Binde- und Unterstrichen bestehen.',
    'alpha_num'            => ':Attribute darf nur aus Buchstaben und Zahlen bestehen.',
    'array'                => ':Attribute muss ein Array sein.',
    'ascii'                => 'Die :attribute darf nur alphanumerische Single-Byte-Zeichen und -Symbole enthalten.',
    'attached'             => ':attribute ist bereits angehängt.',
    'before'               => ':Attribute muss ein Datum vor :date sein.',
    'before_or_equal'      => ':Attribute muss ein Datum vor :date oder gleich :date sein.',
    'between'              => [
        'array'   => ':Attribute muss zwischen :min & :max Elemente haben.',
        'file'    => ':Attribute muss zwischen :min & :max Kilobytes groß sein.',
        'numeric' => ':Attribute muss zwischen :min & :max liegen.',
        'string'  => ':Attribute muss zwischen :min & :max Zeichen lang sein.',
    ],
    'boolean'              => ':Attribute muss entweder \'true\' oder \'false\' sein.',
    'can'                  => 'Das Feld :attribute enthält einen nicht autorisierten Wert.',
    'confirmed'            => ':Attribute stimmt nicht mit der Bestätigung überein.',
    'contains'             => 'Dem Feld :attribute fehlt ein erforderlicher Wert.',
    'current_password'     => 'Das Passwort ist falsch.',
    'date'                 => ':Attribute muss ein gültiges Datum sein.',
    'date_equals'          => ':Attribute muss ein Datum gleich :date sein.',
    'date_format'          => ':Attribute entspricht nicht dem gültigen Format für :format.',
    'decimal'              => 'Die :attribute muss :decimal Dezimalstellen haben.',
    'declined'             => ':Attribute muss abgelehnt werden.',
    'declined_if'          => ':Attribute muss abgelehnt werden wenn :other :value ist.',
    'different'            => ':Attribute und :other müssen sich unterscheiden.',
    'digits'               => ':Attribute muss :digits Stellen haben.',
    'digits_between'       => ':Attribute muss zwischen :min und :max Stellen haben.',
    'dimensions'           => ':Attribute hat ungültige Bildabmessungen.',
    'distinct'             => ':Attribute beinhaltet einen bereits vorhandenen Wert.',
    'doesnt_end_with'      => ':Attribute darf nicht mit einem der folgenden enden: :values.',
    'doesnt_start_with'    => ':Attribute darf nicht mit einem der folgenden beginnen: :values.',
    'email'                => ':Attribute muss eine gültige E-Mail-Adresse sein.',
    'ends_with'            => ':Attribute muss eine der folgenden Endungen aufweisen: :values',
    'enum'                 => 'Der ausgewählte Wert ist ungültig.',
    'exists'               => 'Der gewählte Wert für :attribute ist ungültig.',
    'extensions'           => 'Das Feld :attribute muss eine der folgenden Erweiterungen haben: :values.',
    'file'                 => ':Attribute muss eine Datei sein.',
    'filled'               => ':Attribute muss ausgefüllt sein.',
    'gt'                   => [
        'array'   => ':Attribute muss mehr als :value Elemente haben.',
        'file'    => ':Attribute muss größer als :value Kilobytes sein.',
        'numeric' => ':Attribute muss größer als :value sein.',
        'string'  => ':Attribute muss länger als :value Zeichen sein.',
    ],
    'gte'                  => [
        'array'   => ':Attribute muss mindestens :value Elemente haben.',
        'file'    => ':Attribute muss größer oder gleich :value Kilobytes sein.',
        'numeric' => ':Attribute muss größer oder gleich :value sein.',
        'string'  => ':Attribute muss mindestens :value Zeichen lang sein.',
    ],
    'hex_color'            => 'Das Feld :attribute muss eine gültige Hexadezimalfarbe sein.',
    'image'                => ':Attribute muss ein Bild sein.',
    'in'                   => 'Der gewählte Wert für :attribute ist ungültig.',
    'in_array'             => 'Der gewählte Wert für :attribute kommt nicht in :other vor.',
    'integer'              => ':Attribute muss eine ganze Zahl sein.',
    'ip'                   => ':Attribute muss eine gültige IP-Adresse sein.',
    'ipv4'                 => ':Attribute muss eine gültige IPv4-Adresse sein.',
    'ipv6'                 => ':Attribute muss eine gültige IPv6-Adresse sein.',
    'json'                 => ':Attribute muss ein gültiger JSON-String sein.',
    'list'                 => ':Attribute muss eine Liste sein.',
    'lowercase'            => ':Attribute muss in Kleinbuchstaben sein.',
    'lt'                   => [
        'array'   => ':Attribute muss weniger als :value Elemente haben.',
        'file'    => ':Attribute muss kleiner als :value Kilobytes sein.',
        'numeric' => ':Attribute muss kleiner als :value sein.',
        'string'  => ':Attribute muss kürzer als :value Zeichen sein.',
    ],
    'lte'                  => [
        'array'   => ':Attribute darf maximal :value Elemente haben.',
        'file'    => ':Attribute muss kleiner oder gleich :value Kilobytes sein.',
        'numeric' => ':Attribute muss kleiner oder gleich :value sein.',
        'string'  => ':Attribute darf maximal :value Zeichen lang sein.',
    ],
    'mac_address'          => 'Der Wert muss eine gültige MAC-Adresse sein.',
    'max'                  => [
        'array'   => ':Attribute darf maximal :max Elemente haben.',
        'file'    => ':Attribute darf maximal :max Kilobytes groß sein.',
        'numeric' => ':Attribute darf maximal :max sein.',
        'string'  => ':Attribute darf maximal :max Zeichen haben.',
    ],
    'max_digits'           => ':Attribute darf maximal :max Ziffern lang sein.',
    'mimes'                => ':Attribute muss den Dateityp :values haben.',
    'mimetypes'            => ':Attribute muss den Dateityp :values haben.',
    'min'                  => [
        'array'   => ':Attribute muss mindestens :min Elemente haben.',
        'file'    => ':Attribute muss mindestens :min Kilobytes groß sein.',
        'numeric' => ':Attribute muss mindestens :min sein.',
        'string'  => ':Attribute muss mindestens :min Zeichen lang sein.',
    ],
    'min_digits'           => ':Attribute muss mindestens :min Ziffern lang sein.',
    'missing'              => 'Das Feld :attribute muss fehlen.',
    'missing_if'           => 'Das Feld :attribute muss fehlen, wenn :other gleich :value ist.',
    'missing_unless'       => 'Das Feld :attribute muss fehlen, es sei denn, :other ist :value.',
    'missing_with'         => 'Das Feld :attribute muss fehlen, wenn :values vorhanden ist.',
    'missing_with_all'     => 'Das Feld :attribute muss fehlen, wenn :values vorhanden sind.',
    'multiple_of'          => ':Attribute muss ein Vielfaches von :value sein.',
    'not_in'               => 'Der gewählte Wert für :attribute ist ungültig.',
    'not_regex'            => ':Attribute hat ein ungültiges Format.',
    'numeric'              => ':Attribute muss eine Zahl sein.',
    'password'             => [
        'letters'       => ':Attribute muss mindestens einen Buchstaben beinhalten.',
        'mixed'         => ':Attribute muss mindestens einen Großbuchstaben und einen Kleinbuchstaben beinhalten.',
        'numbers'       => ':Attribute muss mindestens eine Zahl beinhalten.',
        'symbols'       => ':Attribute muss mindestens ein Sonderzeichen beinhalten.',
        'uncompromised' => ':Attribute wurde in einem Datenleck gefunden. Bitte wählen Sie ein anderes :attribute.',
    ],
    'present'              => ':Attribute muss vorhanden sein.',
    'present_if'           => 'Das Feld :attribute muss vorhanden sein, wenn :other gleich :value ist.',
    'present_unless'       => 'Das Feld :attribute muss vorhanden sein, es sei denn, :other ist :value.',
    'present_with'         => 'Das Feld :attribute muss vorhanden sein, wenn :values vorhanden ist.',
    'present_with_all'     => 'Das Feld :attribute muss vorhanden sein, wenn :values vorhanden sind.',
    'prohibited'           => ':Attribute ist unzulässig.',
    'prohibited_if'        => ':Attribute ist unzulässig, wenn :other :value ist.',
    'prohibited_unless'    => ':Attribute ist unzulässig, wenn :other nicht :values ist.',
    'prohibits'            => ':Attribute verbietet die Angabe von :other.',
    'regex'                => ':Attribute Format ist ungültig.',
    'relatable'            => ':attribute kann nicht mit dieser Ressource verbunden werden.',
    'required'             => ':Attribute muss ausgefüllt werden.',
    'required_array_keys'  => 'Dieses Feld muss Einträge enthalten für: :values.',
    'required_if'          => ':Attribute muss ausgefüllt werden, wenn :other den Wert :value hat.',
    'required_if_accepted' => ':Attribute muss ausgefüllt werden, wenn :other gewählt ist.',
    'required_if_declined' => 'Das Feld :attribute ist erforderlich, wenn :other abgelehnt wird.',
    'required_unless'      => ':Attribute muss ausgefüllt werden, wenn :other nicht den Wert :values hat.',
    'required_with'        => ':Attribute muss ausgefüllt werden, wenn :values ausgefüllt wurde.',
    'required_with_all'    => ':Attribute muss ausgefüllt werden, wenn :values ausgefüllt wurde.',
    'required_without'     => ':Attribute muss ausgefüllt werden, wenn :values nicht ausgefüllt wurde.',
    'required_without_all' => ':Attribute muss ausgefüllt werden, wenn keines der Felder :values ausgefüllt wurde.',
    'same'                 => ':Attribute und :other müssen übereinstimmen.',
    'size'                 => [
        'array'   => ':Attribute muss genau :size Elemente haben.',
        'file'    => ':Attribute muss :size Kilobyte groß sein.',
        'numeric' => ':Attribute muss gleich :size sein.',
        'string'  => ':Attribute muss :size Zeichen lang sein.',
    ],
    'starts_with'          => ':Attribute muss mit einem der folgenden Anfänge aufweisen: :values',
    'string'               => ':Attribute muss ein String sein.',
    'timezone'             => ':Attribute muss eine gültige Zeitzone sein.',
    'ulid'                 => 'Die :attribute muss eine gültige ULID sein.',
    'unique'               => ':Attribute ist bereits vergeben.',
    'uploaded'             => ':Attribute konnte nicht hochgeladen werden.',
    'uppercase'            => ':Attribute muss in Großbuchstaben sein.',
    'url'                  => ':Attribute muss eine URL sein.',
    'uuid'                 => ':Attribute muss ein UUID sein.',
    'attributes'           => [
        'address'                  => 'Adresse',
        'affiliate_url'            => 'Affiliate-URL',
        'age'                      => 'Alter',
        'amount'                   => 'Höhe',
        'announcement'             => 'Bekanntmachung',
        'area'                     => 'Gebiet',
        'audience_prize'           => 'Publikumspreis',
        'available'                => 'Verfügbar',
        'birthday'                 => 'Geburtstag',
        'body'                     => 'Körper',
        'city'                     => 'Stadt',
        'compilation'              => 'Zusammenstellung',
        'concept'                  => 'Konzept',
        'conditions'               => 'Bedingungen',
        'content'                  => 'Inhalt',
        'country'                  => 'Land',
        'cover'                    => 'Abdeckung',
        'created_at'               => 'Erstellt am',
        'creator'                  => 'Ersteller',
        'currency'                 => 'Währung',
        'current_password'         => 'Derzeitiges Passwort',
        'customer'                 => 'Kunde',
        'date'                     => 'Datum',
        'date_of_birth'            => 'Geburtsdatum',
        'dates'                    => 'Termine',
        'day'                      => 'Tag',
        'deleted_at'               => 'Gelöscht am',
        'description'              => 'Beschreibung',
        'display_type'             => 'Anzeigetyp',
        'district'                 => 'Bezirk',
        'duration'                 => 'Dauer',
        'email'                    => 'E-Mail-Adresse',
        'excerpt'                  => 'Auszug',
        'filter'                   => 'Filter',
        'finished_at'              => 'fertig um',
        'first_name'               => 'Vorname',
        'gender'                   => 'Geschlecht',
        'grand_prize'              => 'Hauptpreis',
        'group'                    => 'Gruppe',
        'hour'                     => 'Stunde',
        'image'                    => 'Bild',
        'image_desktop'            => 'Desktop-Bild',
        'image_main'               => 'Hauptbild',
        'image_mobile'             => 'mobiles Bild',
        'images'                   => 'Bilder',
        'is_audience_winner'       => 'ist Publikumssieger',
        'is_hidden'                => 'ist versteckt',
        'is_subscribed'            => 'ist abonniert',
        'is_visible'               => 'ist sichtbar',
        'is_winner'                => 'ist Gewinner',
        'items'                    => 'Artikel',
        'key'                      => 'Schlüssel',
        'last_name'                => 'Nachname',
        'lesson'                   => 'Lektion',
        'line_address_1'           => 'Adresszeile 1',
        'line_address_2'           => 'Adresszeile 2',
        'login'                    => 'Anmeldung',
        'message'                  => 'Nachricht',
        'middle_name'              => 'Zweitname',
        'minute'                   => 'Minute',
        'mobile'                   => 'Handynummer',
        'month'                    => 'Monat',
        'name'                     => 'Name',
        'national_code'            => 'Länderkennung',
        'number'                   => 'Nummer',
        'password'                 => 'Passwort',
        'password_confirmation'    => 'Passwortbestätigung',
        'phone'                    => 'Telefonnummer',
        'photo'                    => 'Foto',
        'portfolio'                => 'Portfolio',
        'postal_code'              => 'Postleitzahl',
        'preview'                  => 'Vorschau',
        'price'                    => 'Preis',
        'product_id'               => 'Produkt ID',
        'product_uid'              => 'Produkt-UID',
        'product_uuid'             => 'Produkt-UUID',
        'promo_code'               => 'Aktionscode',
        'province'                 => 'Provinz',
        'quantity'                 => 'Menge',
        'reason'                   => 'Grund',
        'recaptcha_response_field' => 'Captcha-Feld',
        'referee'                  => 'Schiedsrichter',
        'referees'                 => 'Schiedsrichter',
        'reject_reason'            => 'Ablehnungsgrund',
        'remember'                 => 'Erinnern',
        'restored_at'              => 'Wiederhergestellt am',
        'result_text_under_image'  => 'Ergebnistext unter Bild',
        'role'                     => 'Rolle',
        'rule'                     => 'Regel',
        'rules'                    => 'Regeln',
        'second'                   => 'Sekunde',
        'sex'                      => 'Geschlecht',
        'shipment'                 => 'Sendung',
        'short_text'               => 'Kurzer Text',
        'size'                     => 'Größe',
        'skills'                   => 'Fähigkeiten',
        'slug'                     => 'Schnecke',
        'specialization'           => 'Spezialisierung',
        'started_at'               => 'fing an bei',
        'state'                    => 'Bundesland',
        'status'                   => 'Status',
        'street'                   => 'Straße',
        'student'                  => 'Schüler/Student',
        'subject'                  => 'Gegenstand',
        'tag'                      => 'Etikett',
        'tags'                     => 'Stichworte',
        'teacher'                  => 'Lehrer',
        'terms'                    => 'Bedingungen',
        'test_description'         => 'Test Beschreibung',
        'test_locale'              => 'Test Region',
        'test_name'                => 'Testname',
        'text'                     => 'Text',
        'time'                     => 'Uhrzeit',
        'title'                    => 'Titel',
        'type'                     => 'Typ',
        'updated_at'               => 'Aktualisiert am',
        'user'                     => 'Benutzer',
        'username'                 => 'Benutzername',
        'value'                    => 'Wert',
        'year'                     => 'Jahr',
    ],
];


================================================
FILE: resources/lang/de.json
================================================
{
    "(and :count more error)": "(und :count weiterer Fehler)",
    "(and :count more errors)": "(und :count weiterer Fehler)|(und :count weitere Fehler)|(und :count weitere Fehler)",
    "A new verification link has been sent to the email address you provided in your profile settings.": "Ein neuer Bestätigungslink wurde an die E-Mail-Adresse, die in Ihrem Profil hinterlegt ist, gesendet.",
    "A new verification link has been sent to your email address.": "Ein neuer Bestätigungslink wurde an Ihre E-Mail-Adresse versendet.",
    "A Timeout Occurred": "Ein Timeout ist aufgetreten",
    "Accept": "Akzeptieren",
    "Accept Invitation": "Einladung annehmen",
    "Accepted": "Akzeptiert",
    "Action": "Aktion",
    "Actions": "Aktionen",
    "Add": "Hinzufügen",
    "Add :name": "Addiere :name",
    "Add a new team member to your team, allowing them to collaborate with you.": "Fügen Sie ein neues Teammitglied zu Ihrem Team hinzu und erlauben Sie ihm mit Ihnen zusammenzuarbeiten.",
    "Add additional security to your account using two factor authentication.": "Fügen Sie Ihrem Konto zusätzliche Sicherheit hinzu, indem Sie die Zwei-Faktor-Authentifizierung verwenden.",
    "Add Team Member": "Teammitglied hinzufügen",
    "Added.": "Hinzugefügt.",
    "Admin": "Administrator",
    "Administrator": "Administrator",
    "Administrator users can perform any action.": "Administratoren können jede Aktion durchführen.",
    "Agree": "Zustimmen",
    "All of the people that are part of this team.": "Alle Personen, die Teil dieses Teams sind.",
    "All rights reserved.": "Alle Rechte vorbehalten.",
    "Already registered?": "Bereits registriert?",
    "Already Reported": "Bereits gemeldet",
    "API Token": "API-Token",
    "API Token Permissions": "API-Token-Berechtigungen",
    "API Tokens": "API-Token",
    "API tokens allow third-party services to authenticate with our application on your behalf.": "Mit API-Token können sich Dienste von Drittanbietern in Ihrem Namen bei unserer Anwendung authentifizieren.",
    "Archive": "Archiv",
    "Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.": "Möchten Sie dieses Team wirklich löschen? Sobald ein Team gelöscht wird, werden alle Ressourcen und Daten dauerhaft gelöscht.",
    "Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.": "Möchten Sie Ihr Konto wirklich löschen? Sobald Ihr Konto gelöscht wurde, werden alle Ressourcen und Daten dauerhaft gelöscht. Bitte geben Sie Ihr Passwort ein, um zu bestätigen, dass Sie Ihr Konto dauerhaft löschen möchten.",
    "Are you sure you would like to delete this API token?": "Möchten Sie dieses API-Token wirklich löschen?",
    "Are you sure you would like to leave this team?": "Sind Sie sicher, dass Sie dieses Team verlassen möchten?",
    "Are you sure you would like to remove this person from the team?": "Sind Sie sicher, dass Sie diese Person aus dem Team entfernen möchten?",
    "Assign": "Zuordnen",
    "Associate": "Assoziieren",
    "Attach": "Anhängen",
    "Bad Gateway": "Schlechtes Tor",
    "Bad Request": "Schlechte Anfrage",
    "Bandwidth Limit Exceeded": "Bandbreitengrenze überschritten",
    "Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.": "Bitte bestätigen Sie Ihre E-Mail-Adresse mit dem zugesandten Link, bevor Sie fortfahren. Sollten Sie keine E-Mail erhalten haben, senden wir Ihnen diese gerne erneut.",
    "Browse": "Durchsuche",
    "Browser Sessions": "Browsersitzungen",
    "Cancel": "Abbrechen",
    "Choose": "Wählen Sie",
    "Choose :name": "Wählen Sie :name",
    "Choose File": "Datei wählen",
    "Choose Image": "Wählen Sie Bild",
    "Click here to re-send the verification email.": "Klicke hier, um eine neue Verifizierungs-E-Mail zu erhalten.",
    "Click to copy": "Klicken Sie zum Kopieren",
    "Client Closed Request": "Client-Closed-Request",
    "Close": "Schließen",
    "Code": "Code",
    "Collapse": "Zusammenbruch",
    "Collapse All": "Alles reduzieren",
    "Comment": "Kommentar",
    "Confirm": "Bestätigen",
    "Confirm Password": "Passwort bestätigen",
    "Conflict": "Konflikt",
    "Connect": "Verbinden",
    "Connection Closed Without Response": "Verbindung ohne Antwort geschlossen",
    "Connection Timed Out": "Verbindung abgelaufen",
    "Continue": "Weiter",
    "Create": "Erstellen",
    "Create :name": "Erstellen Sie :name",
    "Create a new team to collaborate with others on projects.": "Erstellen Sie ein neues Team, um mit anderen an Projekten zusammenzuarbeiten.",
    "Create Account": "Neues Konto registrieren",
    "Create API Token": "API-Token erstellen",
    "Create New Team": "Neues Team erstellen",
    "Create Team": "Team erstellen",
    "Created": "Erstellt",
    "Created.": "Erstellt.",
    "Current Password": "Derzeitiges Passwort",
    "Dashboard": "Dashboard",
    "Delete": "Löschen",
    "Delete :name": ":name löschen",
    "Delete Account": "Account löschen",
    "Delete API Token": "API-Token löschen",
    "Delete Team": "Team löschen",
    "Detach": "Trennen",
    "Details": "Details",
    "Disable": "Deaktivieren",
    "Discard": "Verwerfen",
    "Done": "Erledigt",
    "Done.": "Erledigt.",
    "Down": "Runter",
    "Duplicate": "Duplikat",
    "Duplicate :name": "Duplikat :name",
    "Edit": "Bearbeiten",
    "Edit :name": "Bearbeiten :name",
    "Edit Profile": "Profil bearbeiten",
    "Editor": "Editor",
    "Editor users have the ability to read, create, and update.": "Editor-Benutzer haben die Möglichkeit, zu lesen, zu erstellen und zu aktualisieren.",
    "Email": "E-Mail",
    "Email Password Reset Link": "Link zum Zurücksetzen des Passwortes zusenden",
    "Enable": "Aktivieren",
    "Ensure your account is using a long, random password to stay secure.": "Stellen Sie sicher, dass Ihr Konto ein langes, zufälliges Passwort verwendet, um die Sicherheit zu gewährleisten.",
    "errors": "Fehler",
    "Expand": "Expandieren",
    "Expand All": "Alle erweitern",
    "Expectation Failed": "Erwartung gescheitert",
    "Explanation": "Erläuterung",
    "Export": "Export",
    "Export :name": "Export :name",
    "Failed Dependency": "Fehlgeschlagene Abhängigkeit",
    "File": "Datei",
    "Files": "Dateien",
    "Finish enabling two factor authentication.": "Aktivierung der Zwei-Faktor-Authentifizierung abschließen.",
    "For your security, please confirm your password to continue.": "Um fortzufahren, bestätigen Sie zu Ihrer Sicherheit bitte Ihr Passwort.",
    "Forbidden": "Verboten",
    "Forgot your password?": "Passwort vergessen?",
    "Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.": "Haben Sie Ihr Passwort vergessen? Kein Problem. Teilen Sie uns einfach Ihre E-Mail-Adresse mit und wir senden Ihnen per E-Mail einen Link zum Zurücksetzen des Passworts, über den Sie ein Neues auswählen können.",
    "Found": "Gefunden",
    "Gateway Timeout": "Gateway-Zeitüberschreitung",
    "Go Home": "Zur Startseite",
    "Go to page :page": "Gehe zur Seite :page",
    "Gone": "Gegangen",
    "Great! You have accepted the invitation to join the :team team.": "Großartig! Sie haben die Einladung zur Teilnahme am :team angenommen.",
    "Hello!": "Hallo!",
    "Hide": "Verstecken",
    "Hide :name": ":name ausblenden",
    "Home": "Heim",
    "HTTP Version Not Supported": "HTTP Version nicht unterstützt",
    "I agree to the :terms_of_service and :privacy_policy": "Ich akzeptiere die :terms_of_service und die :privacy_policy",
    "I'm a teapot": "Ich bin eine Teekanne",
    "If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.": "Bei Bedarf können Sie sich von allen anderen Browsersitzungen auf allen Ihren Geräten abmelden. Einige Ihrer letzten Sitzungen sind unten aufgelistet, diese Liste ist jedoch möglicherweise nicht vollständig. Wenn Sie der Meinung sind, dass Ihr Konto kompromittiert wurde, sollten Sie auch Ihr Kennwort aktualisieren.",
    "If you already have an account, you may accept this invitation by clicking the button below:": "Wenn Sie bereits ein Konto haben, können Sie diese Einladung annehmen, indem Sie auf die Schaltfläche unten klicken:",
    "If you did not create an account, no further action is required.": "Wenn Sie kein Konto erstellt haben, sind keine weiteren Handlungen nötig.",
    "If you did not expect to receive an invitation to this team, you may discard this email.": "Wenn Sie keine Einladung zu diesem Team erwartet haben, kann die E-Mail gelöscht werden.",
    "If you did not request a password reset, no further action is required.": "Wenn Sie kein Zurücksetzen des Passworts beantragt haben, sind keine weiteren Handlungen nötig.",
    "If you do not have an account, you may create one by clicking the button below. After creating an account, you may click the invitation acceptance button in this email to accept the team invitation:": "Wenn Sie kein Konto haben, können Sie ein Konto erstellen, indem Sie auf die Schaltfläche unten klicken. Nach dem Erstellen eines Kontos können Sie in dieser E-Mail auf die Schaltfläche zur Annahme der Einladung klicken, um die Teameinladung anzunehmen:",
    "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "Sollten Sie Schwierigkeiten haben, die Schaltfläche \":actionText\" zu klicken, kopieren Sie den nachfolgenden Link\n in Ihre Adresszeile des Browsers.",
    "IM Used": "IM verwendet",
    "Image": "Bild",
    "Impersonate": "Imitieren",
    "Impersonation": "Identitätswechsel",
    "Import": "Importieren",
    "Import :name": "Importieren Sie :name",
    "Insufficient Storage": "Ungenügende Speicherung",
    "Internal Server Error": "Interner Serverfehler",
    "Introduction": "Einführung",
    "Invalid JSON was returned from the route.": "Von der Route wurde ein ungültiger JSON-Code zurückgegeben.",
    "Invalid SSL Certificate": "Ungültiges SSL-Zertifikat",
    "Last active": "Zuletzt aktiv",
    "Last used": "Zuletzt verwendet",
    "Leave": "Verlassen",
    "Leave Team": "Team verlassen",
    "length": "Länge",
    "Length Required": "Länge erforderlich",
    "Like": "Wie",
    "Load": "Belastung",
    "Localize": "Lokalisieren",
    "Location": "Standort",
    "Locked": "Gesperrt",
    "Log In": "Einloggen",
    "Log in": "Einloggen",
    "Log Out": "Abmelden",
    "Log Out Other Browser Sessions": "Andere Browser-Sitzungen abmelden",
    "Login": "Anmelden",
    "Logout": "Abmelden",
    "Loop Detected": "Schleife erkannt",
    "Maintenance Mode": "Wartungsmodus",
    "Manage Account": "Account verwalten",
    "Manage and log out your active sessions on other browsers and devices.": "Verwalten und Abmelden Ihrer aktiven Sitzungen in anderen Browsern und auf anderen Geräten.",
    "Manage API Tokens": "API-Token verwalten",
    "Manage Role": "Rolle verwalten",
    "Manage Team": "Team verwalten",
    "Method Not Allowed": "Methode nicht erlaubt",
    "Misdirected Request": "Fehlgeleitete Anfrage",
    "Moved Permanently": "Permanent verschoben",
    "Multi-Status": "Multistatus",
    "Multiple Choices": "Mehrfachauswahl",
    "Name": "Name",
    "Network Authentication Required": "Netzwerkauthentifizierung erforderlich",
    "Network Connect Timeout Error": "Zeitüberschreitungsfehler bei Netzwerkverbindung",
    "Network Read Timeout Error": "Zeitüberschreitungsfehler beim Lesen des Netzwerks",
    "New": "Neu",
    "New :name": "Neu :name",
    "New Password": "Neues Passwort",
    "No": "Keine",
    "No Content": "Kein Inhalt",
    "Non-Authoritative Information": "Nicht maßgebende Informationen",
    "Not Acceptable": "Nicht annehmbar",
    "Not Extended": "Nicht erweitert",
    "Not Found": "Nicht gefunden",
    "Not Implemented": "Nicht implementiert",
    "Not Modified": "Nicht modifiziert",
    "of": "von",
    "OK": "OK",
    "Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.": "Sobald ein Team gelöscht wird, werden alle Ressourcen und Daten dauerhaft gelöscht. Laden Sie vor dem Löschen dieses Teams alle Daten oder Informationen zu diesem Team herunter, die Sie behalten möchten.",
    "Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.": "Sobald Ihr Konto gelöscht wurde, werden alle Ressourcen und Daten dauerhaft gelöscht. Laden Sie vor dem Löschen Ihres Kontos alle Daten oder Informationen herunter, die Sie behalten möchten.",
    "Open": "Offen",
    "Open in a current window": "In einem aktuellen Fenster öffnen",
    "Open in a new window": "In einem neuen Fenster öffnen",
    "Open in a parent frame": "In einem übergeordneten Frame öffnen",
    "Open in the topmost frame": "Im obersten Rahmen öffnen",
    "Open on the website": "Auf der Website öffnen",
    "Origin Is Unreachable": "Ursprung ist nicht erreichbar",
    "Page Expired": "Seite abgelaufen",
    "Pagination Navigation": "Seiten-Navigation",
    "Partial Content": "Teilinhalt",
    "Password": "Passwort",
    "Payload Too Large": "Nutzlast zu groß",
    "Payment Required": "Zahlung erforderlich",
    "Pending Team Invitations": "Ausstehende Team Einladungen",
    "Permanent Redirect": "Permanente Weiterleitung",
    "Permanently delete this team.": "Löschen Sie dieses Team dauerhaft.",
    "Permanently delete your account.": "Löschen Sie Ihren Account dauerhaft.",
    "Permissions": "Berechtigungen",
    "Photo": "Foto",
    "Please click the button below to verify your email address.": "Bitte klicken Sie auf die Schaltfläche, um Ihre E-Mail-Adresse zu bestätigen.",
    "Please confirm access to your account by entering one of your emergency recovery codes.": "Bitte bestätigen Sie den Zugriff auf Ihr Konto, indem Sie einen Ihrer Notfall-Wiederherstellungscodes eingeben.",
    "Please confirm access to your account by entering the authentication code provided by your authenticator application.": "Bitte bestätigen Sie den Zugriff auf Ihr Konto, indem Sie den von Ihrer Authentifizierungsanwendung bereitgestellten Authentifizierungscode eingeben.",
    "Please copy your new API token. For your security, it won't be shown again.": "Bitte kopieren Sie Ihren neuen API-Token. Zu Ihrer Sicherheit wird er nicht mehr angezeigt",
    "Please enter your password to confirm you would like to log out of your other browser sessions across all of your devices.": "Bitte geben Sie Ihr Passwort ein, um zu bestätigen, dass Sie sich von Ihren anderen Browser-Sitzungen auf allen Ihren Geräten abmelden möchten.",
    "Please provide the email address of the person you would like to add to this team.": "Bitte geben Sie die E-Mail-Adresse der Person an, die Sie diesem Team hinzufügen möchten.",
    "Precondition Failed": "Vorbedingung fehlgeschlagen",
    "Precondition Required": "Voraussetzung erforderlich",
    "Preview": "Vorschau",
    "Price": "Preis",
    "Privacy Policy": "Datenschutzerklärung",
    "Processing": "Verarbeitung",
    "Profile": "Profil",
    "Profile Information": "Profilinformationen",
    "Proxy Authentication Required": "Proxy-Authentifizierung erforderlich",
    "Railgun Error": "Railgun-Fehler",
    "Range Not Satisfiable": "Bereich nicht erfüllbar",
    "Record": "Aufzeichnen",
    "Recovery Code": "Wiederherstellungscode",
    "Regards": "Mit freundlichen Grüßen",
    "Regenerate Recovery Codes": "Wiederherstellungscodes neu generieren",
    "Register": "Registrieren",
    "Remember me": "Angemeldet bleiben",
    "Remove": "Entfernen",
    "Remove Photo": "Foto entfernen",
    "Remove Team Member": "Teammitglied entfernen",
    "Request Header Fields Too Large": "Kopfzeilenfelder zu groß anfordern",
    "Request Timeout": "Zeitüberschreitung anfordern",
    "Resend Verification Email": "Bestätigungslink erneut senden",
    "Reset Content": "Inhalt zurücksetzen",
    "Reset Password": "Passwort zurücksetzen",
    "Reset Password Notification": "Benachrichtigung zum Zurücksetzen des Passworts",
    "Restore": "Wiederherstellen",
    "Restore :name": ":name wiederherstellen",
    "results": "Ergebnissen",
    "Retry With": "Wiederhole mit",
    "Role": "Rolle",
    "Save": "Speichern",
    "Save & Close": "Speichern und schließen",
    "Save & Return": "Speichern und zurückgeben",
    "Save :name": "Sparen Sie :name",
    "Saved.": "Gespeichert.",
    "Search": "Suchen",
    "Search :name": "Suche :name",
    "See Other": "Andere sehen",
    "Select": "Wählen Sie",
    "Select A New Photo": "Wählen Sie ein neues Foto aus",
    "Select All": "Wählen Sie Alle",
    "Send": "Schicken",
    "Server Error": "Interner Fehler",
    "Service Unavailable": "Service nicht verfügbar",
    "Session Has Expired": "Sitzung ist abgelaufen",
    "Settings": "Einstellungen",
    "Setup Key": "Einrichtungsschlüssel",
    "Show": "Zeigen",
    "Show :name": ":name anzeigen",
    "Show All": "Zeige alles",
    "Show Recovery Codes": "Zeige die Wiederherstellungscodes",
    "Showing": "Zeige",
    "Sign In": "Anmelden",
    "Solve": "Lösen",
    "SSL Handshake Failed": "SSL Handshake fehlgeschlagen",
    "Start": "Start",
    "Stop": "Stoppen",
    "Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.": "Speichern Sie diese Wiederherstellungscodes in einem sicheren Passwortmanager. Sie können verwendet werden, um den Zugriff auf Ihr Konto wiederherzustellen, wenn Ihr Zwei-Faktor-Authentifizierungsgerät verloren geht.",
    "Submit": "Einreichen",
    "Subscribe": "Abonnieren",
    "Switch": "Schalten",
    "Switch Teams": "Teams wechseln",
    "Switch To Role": "Zur Rolle wechseln",
    "Switching Protocols": "Schaltprotokolle",
    "Tag": "Etikett",
    "Tags": "Stichworte",
    "Team Details": "Teamdetails",
    "Team Invitation": "Teameinladung",
    "Team Members": "Teammitglieder",
    "Team Name": "Teamname",
    "Team Owner": "Teambesitzer",
    "Team Settings": "Teameinstellungen",
    "Temporary Redirect": "Temporäre Weiterleitung",
    "Terms of Service": "Nutzungsbedingungen",
    "The :attribute must be a valid role.": ":Attribute muss eine gültige Rolle sein.",
    "The :attribute must be at least :length characters and contain at least one number.": ":Attribute muss aus mindestens :length Zeichen bestehen und mindestens eine Zahl enthalten.",
    "The :attribute must be at least :length characters and contain at least one special character and one number.": ":Attribute muss mindestens :length Zeichen lang sein und mindestens ein Sonderzeichen und eine Zahl enthalten.",
    "The :attribute must be at least :length characters and contain at least one special character.": ":Attribute muss aus mindestens :length Zeichen bestehen und mindestens ein Sonderzeichen enthalten.",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one number.": ":Attribute muss aus mindestens :length Zeichen bestehen und mindestens einen Großbuchstaben und eine Zahl enthalten.",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one special character.": ":Attribute muss aus mindestens :length Zeichen bestehen und mindestens einen Großbuchstaben und ein Sonderzeichen enthalten.",
    "The :attribute must be at least :length characters and contain at least one uppercase character, one number, and one special character.": ":Attribute muss aus mindestens :length Zeichen bestehen und mindestens einen Großbuchstaben, eine Zahl und ein Sonderzeichen enthalten.",
    "The :attribute must be at least :length characters and contain at least one uppercase character.": ":Attribute muss aus mindestens :length Zeichen bestehen und mindestens einen Großbuchstaben enthalten.",
    "The :attribute must be at least :length characters.": ":Attribute muss aus mindestens :length Zeichen bestehen.",
    "The given data was invalid.": "Die gegebenen Daten waren ungültig.",
    "The password is incorrect.": "Das Passwort ist falsch.",
    "The provided password does not match your current password.": "Das angegebene Passwort stimmt nicht mit Ihrem aktuellen Passwort überein.",
    "The provided password was incorrect.": "Das angegebene Passwort war falsch.",
    "The provided two factor authentication code was invalid.": "Der angegebene Zwei-Faktor-Authentifizierungscode war ungültig.",
    "The provided two factor recovery code was invalid.": "Der angegebene Zwei-Faktor-Wiederherstellungscode war ungültig.",
    "The response is not a streamed response.": "Die Antwort ist keine gestreamte Antwort.",
    "The response is not a view.": "Die Antwort ist keine Ansicht.",
    "The team's name and owner information.": "Teamname und Informationen zum Besitzer.",
    "These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.": "Diese Personen wurden zu Ihrem Team eingeladen und haben eine Einladungs-E-Mail erhalten. Sie können dem Team beitreten, indem sie die E-Mail-Einladung annehmen.",
    "This action is unauthorized.": "Diese Aktion ist nicht autorisiert.",
    "This device": "Dieses Gerät",
    "This is a secure area of the application. Please confirm your password before continuing.": "Dies ist ein sicherer Bereich der Anwendung. Bitte geben Sie Ihr Passwort ein, bevor Sie fortfahren.",
    "This password does not match our records.": "Dieses Passwort ist uns nicht bekannt.",
    "This password reset link will expire in :count minutes.": "Dieser Link zum Zurücksetzen des Passworts läuft in :count Minuten ab.",
    "This user already belongs to the team.": "Dieser Benutzer gehört bereits zum Team.",
    "This user has already been invited to the team.": "Dieser Benutzer wurde bereits in dieses Team eingeladen.",
    "to": "bis",
    "To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.": "Um die Aktivierung der Zwei-Faktor-Authentifizierung abzuschließen, scannen Sie den folgenden QR-Code mit der Authentifizierungsanwendung Ihres Smartphones oder geben Sie den Einrichtungsschlüssel ein und geben Sie den generierten OTP-Code ein.",
    "Toggle navigation": "Navigation umschalten",
    "Token Name": "Tokenname",
    "Too Early": "Zu früh",
    "Too Many Requests": "Zu viele Anfragen",
    "Translate": "Übersetzen",
    "Translate It": "Übersetze es",
    "Two Factor Authentication": "Zwei-Faktor-Authentifizierung",
    "Two factor authentication is now enabled. Scan the following QR code using your phone's authenticator application or enter the setup key.": "Die Zwei-Faktor-Authentifizierung ist jetzt aktiviert. Scannen Sie den folgenden QR-Code mit der Authentifizierungsanwendung Ihres Smartphones oder geben Sie den Einrichtungsschlüssel ein.",
    "Unauthorized": "Nicht autorisiert",
    "Unavailable For Legal Reasons": "Aus rechtlichen Gründen nicht verfügbar",
    "Unknown": "Unbekannt",
    "Unknown Error": "Unbekannter Fehler",
    "Unpack": "Auspacken",
    "Unprocessable Entity": "Unverfügbare Entität",
    "Unsubscribe": "Abbestellen",
    "Unsupported Media Type": "Nicht unterstützter Medientyp",
    "Up": "Hoch",
    "Update": "Aktualisieren",
    "Update :name": "Update :name",
    "Update Password": "Passwort aktualisieren",
    "Update your account's profile information and email address.": "Aktualisieren Sie die Profilinformationen und die E-Mail-Adresse Ihres Kontos.",
    "Upgrade Required": "Upgrade erforderlich",
    "URI Too Long": "URI zu lang",
    "Use a recovery code": "Verwenden Sie einen Wiederherstellungscode",
    "Use an authentication code": "Verwenden Sie einen Authentifizierungscode",
    "Use Proxy": "Proxy verwenden",
    "User": "Benutzer",
    "Variant Also Negotiates": "Variante verhandelt auch",
    "Verify Email Address": "E-Mail-Adresse bestätigen",
    "View": "Ansicht",
    "View :name": "Ansicht :name",
    "We were unable to find a registered user with this email address.": "Wir konnten keinen registrierten Benutzer mit dieser E-Mail-Adresse finden.",
    "Web Server is Down": "Webserver ist ausgefallen",
    "When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.": "Wenn die Zwei-Faktor-Authentifizierung aktiviert ist, werden Sie während der Authentifizierung zur Eingabe eines sicheren, zufälligen Tokens aufgefordert. Sie können dieses Token in der Google Authenticator-Anwendung Ihres Telefons abrufen.",
    "Whoops!": "Ups!",
    "Whoops! Something went wrong.": "Ups, etwas ist schief gelaufen.",
    "Yes": "Ja",
    "You are receiving this email because we received a password reset request for your account.": "Sie erhalten diese E-Mail, weil wir einen Antrag auf eine Zurücksetzung Ihres Passworts bekommen haben.",
    "You have been invited to join the :team team!": "Sie wurden eingeladen dem Team :team beizutreten!",
    "You have enabled two factor authentication.": "Sie haben die Zwei-Faktor-Authentifizierung aktiviert.",
    "You have not enabled two factor authentication.": "Sie haben die Zwei-Faktor-Authentifizierung nicht aktiviert.",
    "You may accept this invitation by clicking the button below:": "Sie können diese Einladung annehmen, indem Sie auf die Schaltfläche unten klicken:",
    "You may delete any of your existing tokens if they are no longer needed.": "Sie können alle vorhandenen Token löschen, wenn sie nicht mehr benötigt werden.",
    "You may not delete your personal team.": "Sie können Ihr persönliches Team nicht löschen.",
    "You may not leave a team that you created.": "Sie können ein von Ihnen erstelltes Team nicht verlassen.",
    "Your email address is unverified.": "Ihre E-Mail-Adresse ist nicht verifiziert."
}

================================================
FILE: resources/lang/en/actions.php
================================================
<?php

declare(strict_types=1);

return [
    'accept'          => 'Accept',
    'action'          => 'Action',
    'actions'         => 'Actions',
    'add'             => 'Add',
    'admin'           => 'Admin',
    'agree'           => 'Agree',
    'archive'         => 'Archive',
    'assign'          => 'Assign',
    'associate'       => 'Associate',
    'attach'          => 'Attach',
    'browse'          => 'Browse',
    'cancel'          => 'Cancel',
    'choose'          => 'Choose',
    'choose_file'     => 'Choose File',
    'choose_image'    => 'Choose Image',
    'click_to_copy'   => 'Click to copy',
    'close'           => 'Close',
    'collapse'        => 'Collapse',
    'collapse_all'    => 'Collapse All',
    'comment'         => 'Comment',
    'confirm'         => 'Confirm',
    'connect'         => 'Connect',
    'create'          => 'Create',
    'delete'          => 'Delete',
    'detach'          => 'Detach',
    'details'         => 'Details',
    'disable'         => 'Disable',
    'discard'         => 'Discard',
    'done'            => 'Done',
    'down'            => 'Down',
    'duplicate'       => 'Duplicate',
    'edit'            => 'Edit',
    'enable'          => 'Enable',
    'expand'          => 'Expand',
    'expand_all'      => 'Expand All',
    'explanation'     => 'Explanation',
    'export'          => 'Export',
    'file'            => 'File',
    'files'           => 'Files',
    'go_home'         => 'Go Home',
    'hide'            => 'Hide',
    'home'            => 'Home',
    'image'           => 'Image',
    'impersonate'     => 'Impersonate',
    'impersonation'   => 'Impersonation',
    'import'          => 'Import',
    'introduction'    => 'Introduction',
    'like'            => 'Like',
    'load'            => 'Load',
    'localize'        => 'Localize',
    'log_in'          => 'Log In',
    'log_out'         => 'Log Out',
    'named'           => [
        'add'       => 'Add :name',
        'choose'    => 'Choose :name',
        'create'    => 'Create :name',
        'delete'    => 'Delete :name',
        'duplicate' => 'Duplicate :name',
        'edit'      => 'Edit :name',
        'export'    => 'Export :name',
        'hide'      => 'Hide :name',
        'import'    => 'Import :name',
        'new'       => 'New :name',
        'restore'   => 'Restore :name',
        'save'      => 'Save :name',
        'search'    => 'Search :name',
        'show'      => 'Show :name',
        'update'    => 'Update :name',
        'view'      => 'View :name',
    ],
    'new'             => 'New',
    'no'              => 'No',
    'open'            => 'Open',
    'open_website'    => 'Open on the website',
    'preview'         => 'Preview',
    'price'           => 'Price',
    'record'          => 'Record',
    'restore'         => 'Restore',
    'save'            => 'Save',
    'save_and_close'  => 'Save & Close',
    'save_and_return' => 'Save & Return',
    'search'          => 'Search',
    'select'          => 'Select',
    'select_all'      => 'Select All',
    'send'            => 'Send',
    'settings'        => 'Settings',
    'show'            => 'Show',
    'show_all'        => 'Show All',
    'sign_in'         => 'Sign In',
    'solve'           => 'Solve',
    'start'           => 'Start',
    'stop'            => 'Stop',
    'submit'          => 'Submit',
    'subscribe'       => 'Subscribe',
    'switch'          => 'Switch',
    'switch_to_role'  => 'Switch To Role',
    'tag'             => 'Tag',
    'tags'            => 'Tags',
    'target_link'     => [
        'blank'  => 'Open in a new window',
        'parent' => 'Open in a parent frame',
        'self'   => 'Open in a current window',
        'top'    => 'Open in the topmost frame',
    ],
    'translate'       => 'Translate',
    'translate_it'    => 'Translate It',
    'unpack'          => 'Unpack',
    'unsubscribe'     => 'Unsubscribe',
    'up'              => 'Up',
    'update'          => 'Update',
    'user'            => 'User',
    'view'            => 'View',
    'yes'             => 'Yes',
];


================================================
FILE: resources/lang/en/auth.php
================================================
<?php

declare(strict_types=1);

return [
    'failed'   => 'These credentials do not match our records.',
    'password' => 'The password is incorrect.',
    'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
];


================================================
FILE: resources/lang/en/http-statuses.php
================================================
<?php

declare(strict_types=1);

return [
    '0'            => 'Unknown Error',
    '100'          => 'Continue',
    '101'          => 'Switching Protocols',
    '102'          => 'Processing',
    '200'          => 'OK',
    '201'          => 'Created',
    '202'          => 'Accepted',
    '203'          => 'Non-Authoritative Information',
    '204'          => 'No Content',
    '205'          => 'Reset Content',
    '206'          => 'Partial Content',
    '207'          => 'Multi-Status',
    '208'          => 'Already Reported',
    '226'          => 'IM Used',
    '300'          => 'Multiple Choices',
    '301'          => 'Moved Permanently',
    '302'          => 'Found',
    '303'          => 'See Other',
    '304'          => 'Not Modified',
    '305'          => 'Use Proxy',
    '307'          => 'Temporary Redirect',
    '308'          => 'Permanent Redirect',
    '400'          => 'Bad Request',
    '401'          => 'Unauthorized',
    '402'          => 'Payment Required',
    '403'          => 'Forbidden',
    '404'          => 'Not Found',
    '405'          => 'Method Not Allowed',
    '406'          => 'Not Acceptable',
    '407'          => 'Proxy Authentication Required',
    '408'          => 'Request Timeout',
    '409'          => 'Conflict',
    '410'          => 'Gone',
    '411'          => 'Length Required',
    '412'          => 'Precondition Failed',
    '413'          => 'Payload Too Large',
    '414'          => 'URI Too Long',
    '415'          => 'Unsupported Media Type',
    '416'          => 'Range Not Satisfiable',
    '417'          => 'Expectation Failed',
    '418'          => 'I\'m a teapot',
    '419'          => 'Session Has Expired',
    '421'          => 'Misdirected Request',
    '422'          => 'Unprocessable Entity',
    '423'          => 'Locked',
    '424'          => 'Failed Dependency',
    '425'          => 'Too Early',
    '426'          => 'Upgrade Required',
    '428'          => 'Precondition Required',
    '429'          => 'Too Many Requests',
    '431'          => 'Request Header Fields Too Large',
    '444'          => 'Connection Closed Without Response',
    '449'          => 'Retry With',
    '451'          => 'Unavailable For Legal Reasons',
    '499'          => 'Client Closed Request',
    '500'          => 'Internal Server Error',
    '501'          => 'Not Implemented',
    '502'          => 'Bad Gateway',
    '503'          => 'Maintenance Mode',
    '504'          => 'Gateway Timeout',
    '505'          => 'HTTP Version Not Supported',
    '506'          => 'Variant Also Negotiates',
    '507'          => 'Insufficient Storage',
    '508'          => 'Loop Detected',
    '509'          => 'Bandwidth Limit Exceeded',
    '510'          => 'Not Extended',
    '511'          => 'Network Authentication Required',
    '520'          => 'Unknown Error',
    '521'          => 'Web Server is Down',
    '522'          => 'Connection Timed Out',
    '523'          => 'Origin Is Unreachable',
    '524'          => 'A Timeout Occurred',
    '525'          => 'SSL Handshake Failed',
    '526'          => 'Invalid SSL Certificate',
    '527'          => 'Railgun Error',
    '598'          => 'Network Read Timeout Error',
    '599'          => 'Network Connect Timeout Error',
    'unknownError' => 'Unknown Error',
];


================================================
FILE: resources/lang/en/pagination.php
================================================
<?php

declare(strict_types=1);

return [
    'next'     => 'Next &raquo;',
    'previous' => '&laquo; Previous',
];


================================================
FILE: resources/lang/en/passwords.php
================================================
<?php

declare(strict_types=1);

return [
    'reset'     => 'Your password has been reset.',
    'sent'      => 'We have emailed your password reset link.',
    'throttled' => 'Please wait before retrying.',
    'token'     => 'This password reset token is invalid.',
    'user'      => 'We can\'t find a user with that email address.',
];


================================================
FILE: resources/lang/en/validation.php
================================================
<?php

declare(strict_types=1);

return [
    'accepted'             => 'The :attribute must be accepted.',
    'accepted_if'          => 'The :attribute must be accepted when :other is :value.',
    'active_url'           => 'The :attribute is not a valid URL.',
    'after'                => 'The :attribute must be a date after :date.',
    'after_or_equal'       => 'The :attribute must be a date after or equal to :date.',
    'alpha'                => 'The :attribute must only contain letters.',
    'alpha_dash'           => 'The :attribute must only contain letters, numbers, dashes and underscores.',
    'alpha_num'            => 'The :attribute must only contain letters and numbers.',
    'array'                => 'The :attribute must be an array.',
    'ascii'                => 'The :attribute field must only contain single-byte alphanumeric characters and symbols.',
    'before'               => 'The :attribute must be a date before :date.',
    'before_or_equal'      => 'The :attribute must be a date before or equal to :date.',
    'between'              => [
        'array'   => 'The :attribute must have between :min and :max items.',
        'file'    => 'The :attribute must be between :min and :max kilobytes.',
        'numeric' => 'The :attribute must be between :min and :max.',
        'string'  => 'The :attribute must be between :min and :max characters.',
    ],
    'boolean'              => 'The :attribute field must be true or false.',
    'can'                  => 'The :attribute field contains an unauthorized value.',
    'confirmed'            => 'The :attribute confirmation does not match.',
    'contains'             => 'The :attribute field is missing a required value.',
    'current_password'     => 'The password is incorrect.',
    'date'                 => 'The :attribute is not a valid date.',
    'date_equals'          => 'The :attribute must be a date equal to :date.',
    'date_format'          => 'The :attribute does not match the format :format.',
    'decimal'              => 'The :attribute field must have :decimal decimal places.',
    'declined'             => 'The :attribute must be declined.',
    'declined_if'          => 'The :attribute must be declined when :other is :value.',
    'different'            => 'The :attribute and :other must be different.',
    'digits'               => 'The :attribute must be :digits digits.',
    'digits_between'       => 'The :attribute must be between :min and :max digits.',
    'dimensions'           => 'The :attribute has invalid image dimensions.',
    'distinct'             => 'The :attribute field has a duplicate value.',
    'doesnt_end_with'      => 'The :attribute field must not end with one of the following: :values.',
    'doesnt_start_with'    => 'The :attribute field must not start with one of the following: :values.',
    'email'                => 'The :attribute must be a valid email address.',
    'ends_with'            => 'The :attribute must end with one of the following: :values.',
    'enum'                 => 'The :attribute field value is not in the list of allowed values.',
    'exists'               => 'The :attribute field value does not exist.',
    'extensions'           => 'The :attribute field must have one of the following extensions: :values.',
    'file'                 => 'The :attribute must be a file.',
    'filled'               => 'The :attribute field must have a value.',
    'gt'                   => [
        'array'   => 'The :attribute must have more than :value items.',
        'file'    => 'The :attribute must be greater than :value kilobytes.',
        'numeric' => 'The :attribute must be greater than :value.',
        'string'  => 'The :attribute must be greater than :value characters.',
    ],
    'gte'                  => [
        'array'   => 'The :attribute must have :value items or more.',
        'file'    => 'The :attribute must be greater than or equal to :value kilobytes.',
        'numeric' => 'The :attribute must be greater than or equal to :value.',
        'string'  => 'The :attribute must be greater than or equal to :value characters.',
    ],
    'hex_color'            => 'The :attribute field must be a valid hexadecimal color.',
    'image'                => 'The :attribute must be an image.',
    'in'                   => 'The :attribute field value is not in the list of allowed values.',
    'in_array'             => 'The :attribute field does not exist in :other.',
    'integer'              => 'The :attribute must be an integer.',
    'ip'                   => 'The :attribute must be a valid IP address.',
    'ipv4'                 => 'The :attribute must be a valid IPv4 address.',
    'ipv6'                 => 'The :attribute must be a valid IPv6 address.',
    'json'                 => 'The :attribute must be a valid JSON string.',
    'list'                 => 'The :attribute field must be a list.',
    'lowercase'            => 'The :attribute field must be lowercase.',
    'lt'                   => [
        'array'   => 'The :attribute must have less than :value items.',
        'file'    => 'The :attribute must be less than :value kilobytes.',
        'numeric' => 'The :attribute must be less than :value.',
        'string'  => 'The :attribute must be less than :value characters.',
    ],
    'lte'                  => [
        'array'   => 'The :attribute must not have more than :value items.',
        'file'    => 'The :attribute must be less than or equal to :value kilobytes.',
        'numeric' => 'The :attribute must be less than or equal to :value.',
        'string'  => 'The :attribute must be less than or equal to :value characters.',
    ],
    'mac_address'          => 'The :attribute must be a valid MAC address.',
    'max'                  => [
        'array'   => 'The :attribute must not have more than :max items.',
        'file'    => 'The :attribute must not be greater than :max kilobytes.',
        'numeric' => 'The :attribute must not be greater than :max.',
        'string'  => 'The :attribute must not be greater than :max characters.',
    ],
    'max_digits'           => 'The :attribute field must not have more than :max digits.',
    'mimes'                => 'The :attribute must be a file of type: :values.',
    'mimetypes'            => 'The :attribute must be a file of type: :values.',
    'min'                  => [
        'array'   => 'The :attribute must have at least :min items.',
        'file'    => 'The :attribute must be at least :min kilobytes.',
        'numeric' => 'The :attribute must be at least :min.',
        'string'  => 'The :attribute must be at least :min characters.',
    ],
    'min_digits'           => 'The :attribute field must have at least :min digits.',
    'missing'              => 'The :attribute field must be missing.',
    'missing_if'           => 'The :attribute field must be missing when :other is :value.',
    'missing_unless'       => 'The :attribute field must be missing unless :other is :value.',
    'missing_with'         => 'The :attribute field must be missing when :values is present.',
    'missing_with_all'     => 'The :attribute field must be missing when :values are present.',
    'multiple_of'          => 'The :attribute must be a multiple of :value.',
    'not_in'               => 'The :attribute field must not be in the list.',
    'not_regex'            => 'The :attribute format is invalid.',
    'numeric'              => 'The :attribute must be a number.',
    'password'             => [
        'letters'       => 'The :attribute field must contain at least one letter.',
        'mixed'         => 'The :attribute field must contain at least one uppercase and one lowercase letter.',
        'numbers'       => 'The :attribute field must contain at least one number.',
        'symbols'       => 'The :attribute field must contain at least one symbol.',
        'uncompromised' => 'The given :attribute has appeared in a data leak. Please choose a different :attribute.',
    ],
    'present'              => 'The :attribute field must be present.',
    'present_if'           => 'The :attribute field must be present when :other is :value.',
    'present_unless'       => 'The :attribute field must be present unless :other is :value.',
    'present_with'         => 'The :attribute field must be present when :values is present.',
    'present_with_all'     => 'The :attribute field must be present when :values are present.',
    'prohibited'           => 'The :attribute field is prohibited.',
    'prohibited_if'        => 'The :attribute field is prohibited when :other is :value.',
    'prohibited_unless'    => 'The :attribute field is prohibited unless :other is in :values.',
    'prohibits'            => 'The :attribute field prohibits :other from being present.',
    'regex'                => 'The :attribute format is invalid.',
    'required'             => 'The :attribute field is required.',
    'required_array_keys'  => 'The :attribute field must contain entries for: :values.',
    'required_if'          => 'The :attribute field is required when :other is :value.',
    'required_if_accepted' => 'The :attribute field is required when :other is accepted.',
    'required_if_declined' => 'The :attribute field is required when :other is declined.',
    'required_unless'      => 'The :attribute field is required unless :other is in :values.',
    'required_with'        => 'The :attribute field is required when :values is present.',
    'required_with_all'    => 'The :attribute field is required when :values are present.',
    'required_without'     => 'The :attribute field is required when :values is not present.',
    'required_without_all' => 'The :attribute field is required when none of :values are present.',
    'same'                 => 'The :attribute and :other must match.',
    'size'                 => [
        'array'   => 'The :attribute must contain :size items.',
        'file'    => 'The :attribute must be :size kilobytes.',
        'numeric' => 'The :attribute must be :size.',
        'string'  => 'The :attribute must be :size characters.',
    ],
    'starts_with'          => 'The :attribute must start with one of the following: :values.',
    'string'               => 'The :attribute must be a string.',
    'timezone'             => 'The :attribute must be a valid timezone.',
    'ulid'                 => 'The :attribute field must be a valid ULID.',
    'unique'               => 'The :attribute has already been taken.',
    'uploaded'             => 'The :attribute failed to upload.',
    'uppercase'            => 'The :attribute field must be uppercase.',
    'url'                  => 'The :attribute must be a valid URL.',
    'uuid'                 => 'The :attribute must be a valid UUID.',
    'attributes'           => [
        'address'                  => 'address',
        'affiliate_url'            => 'affiliate URL',
        'age'                      => 'age',
        'amount'                   => 'amount',
        'announcement'             => 'announcement',
        'area'                     => 'area',
        'audience_prize'           => 'audience prize',
        'available'                => 'available',
        'birthday'                 => 'birthday',
        'body'                     => 'body',
        'city'                     => 'city',
        'compilation'              => 'compilation',
        'concept'                  => 'concept',
        'conditions'               => 'conditions',
        'content'                  => 'content',
        'country'                  => 'country',
        'cover'                    => 'cover',
        'created_at'               => 'created at',
        'creator'                  => 'creator',
        'currency'                 => 'currency',
        'current_password'         => 'current password',
        'customer'                 => 'customer',
        'date'                     => 'date',
        'date_of_birth'            => 'date of birth',
        'dates'                    => 'dates',
        'day'                      => 'day',
        'deleted_at'               => 'deleted at',
        'description'              => 'description',
        'display_type'             => 'display type',
        'district'                 => 'district',
        'duration'                 => 'duration',
        'email'                    => 'email',
        'excerpt'                  => 'excerpt',
        'filter'                   => 'filter',
        'finished_at'              => 'finished at',
        'first_name'               => 'first name',
        'gender'                   => 'gender',
        'grand_prize'              => 'grand prize',
        'group'                    => 'group',
        'hour'                     => 'hour',
        'image'                    => 'image',
        'image_desktop'            => 'desktop image',
        'image_main'               => 'main image',
        'image_mobile'             => 'mobile image',
        'images'                   => 'images',
        'is_audience_winner'       => 'is audience winner',
        'is_hidden'                => 'is hidden',
        'is_subscribed'            => 'is subscribed',
        'is_visible'               => 'is visible',
        'is_winner'                => 'is winner',
        'items'                    => 'items',
        'key'                      => 'key',
        'last_name'                => 'last name',
        'lesson'                   => 'lesson',
        'line_address_1'           => 'line address 1',
        'line_address_2'           => 'line address 2',
        'login'                    => 'login',
        'message'                  => 'message',
        'middle_name'              => 'middle name',
        'minute'                   => 'minute',
        'mobile'                   => 'mobile',
        'month'                    => 'month',
        'name'                     => 'name',
        'national_code'            => 'national code',
        'number'                   => 'number',
        'password'                 => 'password',
        'password_confirmation'    => 'password confirmation',
        'phone'                    => 'phone',
        'photo'                    => 'photo',
        'portfolio'                => 'portfolio',
        'postal_code'              => 'postal code',
        'preview'                  => 'preview',
        'price'                    => 'price',
        'product_id'               => 'product ID',
        'product_uid'              => 'product UID',
        'product_uuid'             => 'product UUID',
        'promo_code'               => 'promo code',
        'province'                 => 'province',
        'quantity'                 => 'quantity',
        'reason'                   => 'reason',
        'recaptcha_response_field' => 'recaptcha response field',
        'referee'                  => 'referee',
        'referees'                 => 'referees',
        'reject_reason'            => 'reject reason',
        'remember'                 => 'remember',
        'restored_at'              => 'restored at',
        'result_text_under_image'  => 'result text under image',
        'role'                     => 'role',
        'rule'                     => 'rule',
        'rules'                    => 'rules',
        'second'                   => 'second',
        'sex'                      => 'sex',
        'shipment'                 => 'shipment',
        'short_text'               => 'short text',
        'size'                     => 'size',
        'skills'                   => 'skills',
        'slug'                     => 'slug',
        'specialization'           => 'specialization',
        'started_at'               => 'started at',
        'state'                    => 'state',
        'status'                   => 'status',
        'street'                   => 'street',
        'student'                  => 'student',
        'subject'                  => 'subject',
        'tag'                      => 'tag',
        'tags'                     => 'tags',
        'teacher'                  => 'teacher',
        'terms'                    => 'terms',
        'test_description'         => 'test description',
        'test_locale'              => 'test locale',
        'test_name'                => 'test name',
        'text'                     => 'text',
        'time'                     => 'time',
        'title'                    => 'title',
        'type'                     => 'type',
        'updated_at'               => 'updated at',
        'user'                     => 'user',
        'username'                 => 'username',
        'value'                    => 'value',
        'year'                     => 'year',
    ],
];


================================================
FILE: resources/lang/en.json
================================================
{
    "(and :count more error)": "(and :count more error)",
    "(and :count more errors)": "(and :count more error)|(and :count more errors)|(and :count more errors)",
    "A new verification link has been sent to the email address you provided in your profile settings.": "A new verification link has been sent to the email address you provided in your profile settings.",
    "A new verification link has been sent to your email address.": "A new verification link has been sent to your email address.",
    "A Timeout Occurred": "A Timeout Occurred",
    "Accept": "Accept",
    "Accept Invitation": "Accept Invitation",
    "Accepted": "Accepted",
    "Action": "Action",
    "Actions": "Actions",
    "Add": "Add",
    "Add :name": "Add :name",
    "Add a new team member to your team, allowing them to collaborate with you.": "Add a new team member to your team, allowing them to collaborate with you.",
    "Add additional security to your account using two factor authentication.": "Add additional security to your account using two factor authentication.",
    "Add Team Member": "Add Team Member",
    "Added.": "Added.",
    "Admin": "Admin",
    "Administrator": "Administrator",
    "Administrator users can perform any action.": "Administrator users can perform any action.",
    "Agree": "Agree",
    "All of the people that are part of this team.": "All of the people that are part of this team.",
    "All rights reserved.": "All rights reserved.",
    "Already registered?": "Already registered?",
    "Already Reported": "Already Reported",
    "API Token": "API Token",
    "API Token Permissions": "API Token Permissions",
    "API Tokens": "API Tokens",
    "API tokens allow third-party services to authenticate with our application on your behalf.": "API tokens allow third-party services to authenticate with our application on your behalf.",
    "Archive": "Archive",
    "Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.": "Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.",
    "Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.": "Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.",
    "Are you sure you would like to delete this API token?": "Are you sure you would like to delete this API token?",
    "Are you sure you would like to leave this team?": "Are you sure you would like to leave this team?",
    "Are you sure you would like to remove this person from the team?": "Are you sure you would like to remove this person from the team?",
    "Assign": "Assign",
    "Associate": "Associate",
    "Attach": "Attach",
    "Bad Gateway": "Bad Gateway",
    "Bad Request": "Bad Request",
    "Bandwidth Limit Exceeded": "Bandwidth Limit Exceeded",
    "Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.": "Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.",
    "Browse": "Browse",
    "Browser Sessions": "Browser Sessions",
    "Cancel": "Cancel",
    "Choose": "Choose",
    "Choose :name": "Choose :name",
    "Choose File": "Choose File",
    "Choose Image": "Choose Image",
    "Click here to re-send the verification email.": "Click here to re-send the verification email.",
    "Click to copy": "Click to copy",
    "Client Closed Request": "Client Closed Request",
    "Close": "Close",
    "Code": "Code",
    "Collapse": "Collapse",
    "Collapse All": "Collapse All",
    "Comment": "Comment",
    "Confirm": "Confirm",
    "Confirm Password": "Confirm Password",
    "Conflict": "Conflict",
    "Connect": "Connect",
    "Connection Closed Without Response": "Connection Closed Without Response",
    "Connection Timed Out": "Connection Timed Out",
    "Continue": "Continue",
    "Create": "Create",
    "Create :name": "Create :name",
    "Create a new team to collaborate with others on projects.": "Create a new team to collaborate with others on projects.",
    "Create Account": "Create Account",
    "Create API Token": "Create API Token",
    "Create New Team": "Create New Team",
    "Create Team": "Create Team",
    "Created": "Created",
    "Created.": "Created.",
    "Current Password": "Current Password",
    "Dashboard": "Dashboard",
    "Delete": "Delete",
    "Delete :name": "Delete :name",
    "Delete Account": "Delete Account",
    "Delete API Token": "Delete API Token",
    "Delete Team": "Delete Team",
    "Detach": "Detach",
    "Details": "Details",
    "Disable": "Disable",
    "Discard": "Discard",
    "Done": "Done",
    "Done.": "Done.",
    "Down": "Down",
    "Duplicate": "Duplicate",
    "Duplicate :name": "Duplicate :name",
    "Edit": "Edit",
    "Edit :name": "Edit :name",
    "Edit Profile": "Edit Profile",
    "Editor": "Editor",
    "Editor users have the ability to read, create, and update.": "Editor users have the ability to read, create, and update.",
    "Email": "Email",
    "Email Password Reset Link": "Email Password Reset Link",
    "Enable": "Enable",
    "Ensure your account is using a long, random password to stay secure.": "Ensure your account is using a long, random password to stay secure.",
    "errors": "errors",
    "Expand": "Expand",
    "Expand All": "Expand All",
    "Expectation Failed": "Expectation Failed",
    "Explanation": "Explanation",
    "Export": "Export",
    "Export :name": "Export :name",
    "Failed Dependency": "Failed Dependency",
    "File": "File",
    "Files": "Files",
    "Finish enabling two factor authentication.": "Finish enabling two factor authentication.",
    "For your security, please confirm your password to continue.": "For your security, please confirm your password to continue.",
    "Forbidden": "Forbidden",
    "Forgot your password?": "Forgot your password?",
    "Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.": "Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.",
    "Found": "Found",
    "Gateway Timeout": "Gateway Timeout",
    "Go Home": "Go Home",
    "Go to page :page": "Go to page :page",
    "Gone": "Gone",
    "Great! You have accepted the invitation to join the :team team.": "Great! You have accepted the invitation to join the :team team.",
    "Hello!": "Hello!",
    "Hide": "Hide",
    "Hide :name": "Hide :name",
    "Home": "Home",
    "HTTP Version Not Supported": "HTTP Version Not Supported",
    "I agree to the :terms_of_service and :privacy_policy": "I agree to the :terms_of_service and :privacy_policy",
    "I'm a teapot": "I'm a teapot",
    "If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.": "If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.",
    "If you already have an account, you may accept this invitation by clicking the button below:": "If you already have an account, you may accept this invitation by clicking the button below:",
    "If you did not create an account, no further action is required.": "If you did not create an account, no further action is required.",
    "If you did not expect to receive an invitation to this team, you may discard this email.": "If you did not expect to receive an invitation to this team, you may discard this email.",
    "If you did not request a password reset, no further action is required.": "If you did not request a password reset, no further action is required.",
    "If you do not have an account, you may create one by clicking the button below. After creating an account, you may click the invitation acceptance button in this email to accept the team invitation:": "If you do not have an account, you may create one by clicking the button below. After creating an account, you may click the invitation acceptance button in this email to accept the team invitation:",
    "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:",
    "IM Used": "IM Used",
    "Image": "Image",
    "Impersonate": "Impersonate",
    "Impersonation": "Impersonation",
    "Import": "Import",
    "Import :name": "Import :name",
    "Insufficient Storage": "Insufficient Storage",
    "Internal Server Error": "Internal Server Error",
    "Introduction": "Introduction",
    "Invalid JSON was returned from the route.": "Invalid JSON was returned from the route.",
    "Invalid SSL Certificate": "Invalid SSL Certificate",
    "Last active": "Last active",
    "Last used": "Last used",
    "Leave": "Leave",
    "Leave Team": "Leave Team",
    "length": "length",
    "Length Required": "Length Required",
    "Like": "Like",
    "Load": "Load",
    "Localize": "Localize",
    "Location": "Location",
    "Locked": "Locked",
    "Log In": "Log In",
    "Log in": "Log in",
    "Log Out": "Log Out",
    "Log Out Other Browser Sessions": "Log Out Other Browser Sessions",
    "Login": "Login",
    "Logout": "Logout",
    "Loop Detected": "Loop Detected",
    "Maintenance Mode": "Maintenance Mode",
    "Manage Account": "Manage Account",
    "Manage and log out your active sessions on other browsers and devices.": "Manage and log out your active sessions on other browsers and devices.",
    "Manage API Tokens": "Manage API Tokens",
    "Manage Role": "Manage Role",
    "Manage Team": "Manage Team",
    "Method Not Allowed": "Method Not Allowed",
    "Misdirected Request": "Misdirected Request",
    "Moved Permanently": "Moved Permanently",
    "Multi-Status": "Multi-Status",
    "Multiple Choices": "Multiple Choices",
    "Name": "Name",
    "Network Authentication Required": "Network Authentication Required",
    "Network Connect Timeout Error": "Network Connect Timeout Error",
    "Network Read Timeout Error": "Network Read Timeout Error",
    "New": "New",
    "New :name": "New :name",
    "New Password": "New Password",
    "No": "No",
    "No Content": "No Content",
    "Non-Authoritative Information": "Non-Authoritative Information",
    "Not Acceptable": "Not Acceptable",
    "Not Extended": "Not Extended",
    "Not Found": "Not Found",
    "Not Implemented": "Not Implemented",
    "Not Modified": "Not Modified",
    "of": "of",
    "OK": "OK",
    "Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.": "Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.",
    "Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.": "Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.",
    "Open": "Open",
    "Open in a current window": "Open in a current window",
    "Open in a new window": "Open in a new window",
    "Open in a parent frame": "Open in a parent frame",
    "Open in the topmost frame": "Open in the topmost frame",
    "Open on the website": "Open on the website",
    "Origin Is Unreachable": "Origin Is Unreachable",
    "Page Expired": "Page Expired",
    "Pagination Navigation": "Pagination Navigation",
    "Partial Content": "Partial Content",
    "Password": "Password",
    "Payload Too Large": "Payload Too Large",
    "Payment Required": "Payment Required",
    "Pending Team Invitations": "Pending Team Invitations",
    "Permanent Redirect": "Permanent Redirect",
    "Permanently delete this team.": "Permanently delete this team.",
    "Permanently delete your account.": "Permanently delete your account.",
    "Permissions": "Permissions",
    "Photo": "Photo",
    "Please click the button below to verify your email address.": "Please click the button below to verify your email address.",
    "Please confirm access to your account by entering one of your emergency recovery codes.": "Please confirm access to your account by entering one of your emergency recovery codes.",
    "Please confirm access to your account by entering the authentication code provided by your authenticator application.": "Please confirm access to your account by entering the authentication code provided by your authenticator application.",
    "Please copy your new API token. For your security, it won't be shown again.": "Please copy your new API token. For your security, it won't be shown again.",
    "Please enter your password to confirm you would like to log out of your other browser sessions across all of your devices.": "Please enter your password to confirm you would like to log out of your other browser sessions across all of your devices.",
    "Please provide the email address of the person you would like to add to this team.": "Please provide the email address of the person you would like to add to this team.",
    "Precondition Failed": "Precondition Failed",
    "Precondition Required": "Precondition Required",
    "Preview": "Preview",
    "Price": "Price",
    "Privacy Policy": "Privacy Policy",
    "Processing": "Processing",
    "Profile": "Profile",
    "Profile Information": "Profile Information",
    "Proxy Authentication Required": "Proxy Authentication Required",
    "Railgun Error": "Railgun Error",
    "Range Not Satisfiable": "Range Not Satisfiable",
    "Record": "Record",
    "Recovery Code": "Recovery Code",
    "Regards": "Regards",
    "Regenerate Recovery Codes": "Regenerate Recovery Codes",
    "Register": "Register",
    "Remember me": "Remember me",
    "Remove": "Remove",
    "Remove Photo": "Remove Photo",
    "Remove Team Member": "Remove Team Member",
    "Request Header Fields Too Large": "Request Header Fields Too Large",
    "Request Timeout": "Request Timeout",
    "Resend Verification Email": "Resend Verification Email",
    "Reset Content": "Reset Content",
    "Reset Password": "Reset Password",
    "Reset Password Notification": "Reset Password Notification",
    "Restore": "Restore",
    "Restore :name": "Restore :name",
    "results": "results",
    "Retry With": "Retry With",
    "Role": "Role",
    "Save": "Save",
    "Save & Close": "Save & Close",
    "Save & Return": "Save & Return",
    "Save :name": "Save :name",
    "Saved.": "Saved.",
    "Search": "Search",
    "Search :name": "Search :name",
    "See Other": "See Other",
    "Select": "Select",
    "Select A New Photo": "Select A New Photo",
    "Select All": "Select All",
    "Send": "Send",
    "Server Error": "Server Error",
    "Service Unavailable": "Service Unavailable",
    "Session Has Expired": "Session Has Expired",
    "Settings": "Settings",
    "Setup Key": "Setup Key",
    "Show": "Show",
    "Show :name": "Show :name",
    "Show All": "Show All",
    "Show Recovery Codes": "Show Recovery Codes",
    "Showing": "Showing",
    "Sign In": "Sign In",
    "Solve": "Solve",
    "SSL Handshake Failed": "SSL Handshake Failed",
    "Start": "Start",
    "Stop": "Stop",
    "Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.": "Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.",
    "Submit": "Submit",
    "Subscribe": "Subscribe",
    "Switch": "Switch",
    "Switch Teams": "Switch Teams",
    "Switch To Role": "Switch To Role",
    "Switching Protocols": "Switching Protocols",
    "Tag": "Tag",
    "Tags": "Tags",
    "Team Details": "Team Details",
    "Team Invitation": "Team Invitation",
    "Team Members": "Team Members",
    "Team Name": "Team Name",
    "Team Owner": "Team Owner",
    "Team Settings": "Team Settings",
    "Temporary Redirect": "Temporary Redirect",
    "Terms of Service": "Terms of Service",
    "The :attribute must be a valid role.": "The :attribute must be a valid role.",
    "The :attribute must be at least :length characters and contain at least one number.": "The :attribute must be at least :length characters and contain at least one number.",
    "The :attribute must be at least :length characters and contain at least one special character and one number.": "The :attribute must be at least :length characters and contain at least one special character and one number.",
    "The :attribute must be at least :length characters and contain at least one special character.": "The :attribute must be at least :length characters and contain at least one special character.",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one number.": "The :attribute must be at least :length characters and contain at least one uppercase character and one number.",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one special character.": "The :attribute must be at least :length characters and contain at least one uppercase character and one special character.",
    "The :attribute must be at least :length characters and contain at least one uppercase character, one number, and one special character.": "The :attribute must be at least :length characters and contain at least one uppercase character, one number, and one special character.",
    "The :attribute must be at least :length characters and contain at least one uppercase character.": "The :attribute must be at least :length characters and contain at least one uppercase character.",
    "The :attribute must be at least :length characters.": "The :attribute must be at least :length characters.",
    "The given data was invalid.": "The given data was invalid.",
    "The password is incorrect.": "The password is incorrect.",
    "The provided password does not match your current password.": "The provided password does not match your current password.",
    "The provided password was incorrect.": "The provided password was incorrect.",
    "The provided two factor authentication code was invalid.": "The provided two factor authentication code was invalid.",
    "The provided two factor recovery code was invalid.": "The provided two factor recovery code was invalid.",
    "The response is not a streamed response.": "The response is not a streamed response.",
    "The response is not a view.": "The response is not a view.",
    "The team's name and owner information.": "The team's name and owner information.",
    "These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.": "These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.",
    "This action is unauthorized.": "This action is unauthorized.",
    "This device": "This device",
    "This is a secure area of the application. Please confirm your password before continuing.": "This is a secure area of the application. Please confirm your password before continuing.",
    "This password does not match our records.": "This password does not match our records.",
    "This password reset link will expire in :count minutes.": "This password reset link will expire in :count minutes.",
    "This user already belongs to the team.": "This user already belongs to the team.",
    "This user has already been invited to the team.": "This user has already been invited to the team.",
    "to": "to",
    "To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.": "To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.",
    "Toggle navigation": "Toggle navigation",
    "Token Name": "Token Name",
    "Too Early": "Too Early",
    "Too Many Requests": "Too Many Requests",
    "Translate": "Translate",
    "Translate It": "Translate It",
    "Two Factor Authentication": "Two Factor Authentication",
    "Two factor authentication is now enabled. Scan the following QR code using your phone's authenticator application or enter the setup key.": "Two factor authentication is now enabled. Scan the following QR code using your phone's authenticator application or enter the setup key.",
    "Unauthorized": "Unauthorized",
    "Unavailable For Legal Reasons": "Unavailable For Legal Reasons",
    "Unknown": "Unknown",
    "Unknown Error": "Unknown Error",
    "Unpack": "Unpack",
    "Unprocessable Entity": "Unprocessable Entity",
    "Unsubscribe": "Unsubscribe",
    "Unsupported Media Type": "Unsupported Media Type",
    "Up": "Up",
    "Update": "Update",
    "Update :name": "Update :name",
    "Update Password": "Update Password",
    "Update your account's profile information and email address.": "Update your account's profile information and email address.",
    "Upgrade Required": "Upgrade Required",
    "URI Too Long": "URI Too Long",
    "Use a recovery code": "Use a recovery code",
    "Use an authentication code": "Use an authentication code",
    "Use Proxy": "Use Proxy",
    "User": "User",
    "Variant Also Negotiates": "Variant Also Negotiates",
    "Verify Email Address": "Verify Email Address",
    "View": "View",
    "View :name": "View :name",
    "We were unable to find a registered user with this email address.": "We were unable to find a registered user with this email address.",
    "Web Server is Down": "Web Server is Down",
    "When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.": "When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.",
    "Whoops!": "Whoops!",
    "Whoops! Something went wrong.": "Whoops! Something went wrong.",
    "Yes": "Yes",
    "You are receiving this email because we received a password reset request for your account.": "You are receiving this email because we received a password reset request for your account.",
    "You have been invited to join the :team team!": "You have been invited to join the :team team!",
    "You have enabled two factor authentication.": "You have enabled two factor authentication.",
    "You have not enabled two factor authentication.": "You have not enabled two factor authentication.",
    "You may accept this invitation by clicking the button below:": "You may accept this invitation by clicking the button below:",
    "You may delete any of your existing tokens if they are no longer needed.": "You may delete any of your existing tokens if they are no longer needed.",
    "You may not delete your personal team.": "You may not delete your personal team.",
    "You may not leave a team that you created.": "You may not leave a team that you created.",
    "Your email address is unverified.": "Your email address is unverified."
}

================================================
FILE: resources/lang/fr/actions.php
================================================
<?php

declare(strict_types=1);

return [
    'accept'          => 'Accepter',
    'action'          => 'Action',
    'actions'         => 'Actions',
    'add'             => 'Ajouter',
    'admin'           => 'Administrateur',
    'agree'           => 'Accepter',
    'archive'         => 'Archive',
    'assign'          => 'Attribuer',
    'associate'       => 'Associé',
    'attach'          => 'Attacher',
    'browse'          => 'Parcourir',
    'cancel'          => 'Annuler',
    'choose'          => 'Choisir',
    'choose_file'     => 'Choisir le fichier',
    'choose_image'    => 'Choisir une image',
    'click_to_copy'   => 'Cliquez pour copier',
    'close'           => 'Fermer',
    'collapse'        => 'Effondrement',
    'collapse_all'    => 'Réduire tout',
    'comment'         => 'Commentaire',
    'confirm'         => 'Confirmer',
    'connect'         => 'Connecter',
    'create'          => 'Créer',
    'delete'          => 'Supprimer',
    'detach'          => 'Détacher',
    'details'         => 'Détails',
    'disable'         => 'Désactiver',
    'discard'         => 'Jeter',
    'done'            => 'Fait',
    'down'            => 'Vers le bas',
    'duplicate'       => 'Dupliquer',
    'edit'            => 'Modifier',
    'enable'          => 'Activer',
    'expand'          => 'Développer',
    'expand_all'      => 'Développer tout',
    'explanation'     => 'Explication',
    'export'          => 'Exporter',
    'file'            => 'Déposer',
    'files'           => 'Des dossiers',
    'go_home'         => 'Rentrer chez soi',
    'hide'            => 'Cacher',
    'home'            => 'Maison',
    'image'           => 'Image',
    'impersonate'     => 'Imiter',
    'impersonation'   => 'Imitation',
    'import'          => 'Importer',
    'introduction'    => 'Introduction',
    'like'            => 'Comme',
    'load'            => 'Charger',
    'localize'        => 'Localiser',
    'log_in'          => 'Se connecter',
    'log_out'         => 'Se déconnecter',
    'named'           => [
        'add'       => 'Ajouter :name',
        'choose'    => 'Choisissez :name',
        'create'    => 'Créer :name',
        'delete'    => 'Supprimer :name',
        'duplicate' => 'Dupliquer :name',
        'edit'      => 'Modifier :name',
        'export'    => 'Export :name',
        'hide'      => 'Masquer :name',
        'import'    => 'Importer :name',
        'new'       => 'Nouveau :name',
        'restore'   => 'Restaurer :name',
        'save'      => 'Économisez :name',
        'search'    => 'Recherche :name',
        'show'      => 'Afficher :name',
        'update'    => 'Mise à jour :name',
        'view'      => 'Voir :name',
    ],
    'new'             => 'Nouveau',
    'no'              => 'Non',
    'open'            => 'Ouvrir',
    'open_website'    => 'Ouvert sur le site',
    'preview'         => 'Aperçu',
    'price'           => 'Prix',
    'record'          => 'Enregistrer',
    'restore'         => 'Restaurer',
    'save'            => 'Sauvegarder',
    'save_and_close'  => 'Sauvegarder et fermer',
    'save_and_return' => 'Enregistrer et retourner',
    'search'          => 'Recherche',
    'select'          => 'Sélectionner',
    'select_all'      => 'Tout sélectionner',
    'send'            => 'Envoyer',
    'settings'        => 'Paramètres',
    'show'            => 'Montrer',
    'show_all'        => 'Afficher tout',
    'sign_in'         => 'Se connecter',
    'solve'           => 'Résoudre',
    'start'           => 'Commencer',
    'stop'            => 'Arrêter',
    'submit'          => 'Soumettre',
    'subscribe'       => 'S\'abonner',
    'switch'          => 'Changer',
    'switch_to_role'  => 'Passer au rôle',
    'tag'             => 'Étiqueter',
    'tags'            => 'Mots clés',
    'target_link'     => [
        'blank'  => 'Ouvrir dans une nouvelle fenêtre',
        'parent' => 'Ouvrir dans un frame parent',
        'self'   => 'Ouvrir dans une fenêtre actuelle',
        'top'    => 'Ouvrir dans le cadre le plus haut',
    ],
    'translate'       => 'Traduire',
    'translate_it'    => 'Traduis le',
    'unpack'          => 'Déballer',
    'unsubscribe'     => 'Se désabonner',
    'up'              => 'En haut',
    'update'          => 'Mise à jour',
    'user'            => 'Utilisateur',
    'view'            => 'Voir',
    'yes'             => 'Oui',
];


================================================
FILE: resources/lang/fr/auth.php
================================================
<?php

declare(strict_types=1);

return [
    'failed'   => 'Ces identifiants ne correspondent pas à nos enregistrements.',
    'password' => 'Le mot de passe est incorrect',
    'throttle' => 'Tentatives de connexion trop nombreuses. Veuillez essayer de nouveau dans :seconds secondes.',
];


================================================
FILE: resources/lang/fr/http-statuses.php
================================================
<?php

declare(strict_types=1);

return [
    '0'            => 'Erreur inconnue',
    '100'          => 'Continuer',
    '101'          => 'Protocoles de commutation',
    '102'          => 'En traitement',
    '200'          => 'OK',
    '201'          => 'Créé',
    '202'          => 'Accepté',
    '203'          => 'Informations non autorisées',
    '204'          => 'Pas de contenu',
    '205'          => 'Réinitialiser le contenu',
    '206'          => 'Contenu partiel',
    '207'          => 'Multi-statut',
    '208'          => 'Déjà rapporté',
    '226'          => 'J\'ai l\'habitude',
    '300'          => 'Choix multiples',
    '301'          => 'Déplacé de façon permanente',
    '302'          => 'A trouvé',
    '303'          => 'Voir autre',
    '304'          => 'Non modifié',
    '305'          => 'Utiliser un proxy',
    '307'          => 'Redirection temporaire',
    '308'          => 'Redirection permanente',
    '400'          => 'Mauvaise Demande',
    '401'          => 'Non autorisé',
    '402'          => 'Paiement Requis',
    '403'          => 'Interdit',
    '404'          => 'Page non trouvée',
    '405'          => 'Méthode Non Autorisée',
    '406'          => 'Pas acceptable',
    '407'          => 'Authentification proxy requise',
    '408'          => 'Délai d\'expiration de la demande',
    '409'          => 'Conflit',
    '410'          => 'Disparu',
    '411'          => 'Longueur requise',
    '412'          => 'La précondition a échoué',
    '413'          => 'Charge utile trop grande',
    '414'          => 'URI trop long',
    '415'          => 'Type de support non supporté',
    '416'          => 'Plage non satisfaisante',
    '417'          => 'Échec de l\'attente',
    '418'          => 'Je suis une théière',
    '419'          => 'La session a expiré',
    '421'          => 'Demande mal dirigée',
    '422'          => 'Entité non traitable',
    '423'          => 'Fermé à clef',
    '424'          => 'Dépendance échouée',
    '425'          => 'Trop tôt',
    '426'          => 'Mise à niveau requise',
    '428'          => 'Condition préalable requise',
    '429'          => 'Trop de demandes',
    '431'          => 'Champs d\'en-tête de requête trop grands',
    '444'          => 'Connexion fermée sans réponse',
    '449'          => 'Réessayer avec',
    '451'          => 'Indisponible pour des raisons légales',
    '499'          => 'Demande fermée du client',
    '500'          => 'Erreur Interne du Serveur',
    '501'          => 'Pas mis en œuvre',
    '502'          => 'Mauvaise passerelle',
    '503'          => 'Mode de Maintenance',
    '504'          => 'Délai d\'attente de la passerelle',
    '505'          => 'Version HTTP non prise en charge',
    '506'          => 'La variante négocie également',
    '507'          => 'Espace insuffisant',
    '508'          => 'Boucle détectée',
    '509'          => 'Limite de bande passante dépassée',
    '510'          => 'Non prolongé',
    '511'          => 'Authentification réseau requise',
    '520'          => 'Erreur inconnue',
    '521'          => 'Le serveur Web est en panne',
    '522'          => 'La connexion a expiré',
    '523'          => 'L\'origine est inaccessible',
    '524'          => 'Un dépassement de délai s\'est produit',
    '525'          => 'Échec de la prise de contact SSL',
    '526'          => 'Certificat SSL invalide',
    '527'          => 'Erreur de Railgun',
    '598'          => 'Erreur de délai de lecture réseau',
    '599'          => 'Erreur de délai de connexion réseau',
    'unknownError' => 'Erreur inconnue',
];


================================================
FILE: resources/lang/fr/pagination.php
================================================
<?php

declare(strict_types=1);

return [
    'next'     => 'Suivant &raquo;',
    'previous' => '&laquo; Précédent',
];


================================================
FILE: resources/lang/fr/passwords.php
================================================
<?php

declare(strict_types=1);

return [
    'reset'     => 'Votre mot de passe a été réinitialisé !',
    'sent'      => 'Nous vous avons envoyé par email le lien de réinitialisation du mot de passe !',
    'throttled' => 'Veuillez patienter avant de réessayer.',
    'token'     => 'Ce jeton de réinitialisation du mot de passe n\'est pas valide.',
    'user'      => 'Aucun utilisateur n\'a été trouvé avec cette adresse email.',
];


================================================
FILE: resources/lang/fr/validation.php
================================================
<?php

declare(strict_types=1);

return [
    'accepted'             => 'Le champ :attribute doit être accepté.',
    'accepted_if'          => 'Le champ :attribute doit être accepté quand :other a la valeur :value.',
    'active_url'           => 'Le champ :attribute n\'est pas une URL valide.',
    'after'                => 'Le champ :attribute doit être une date postérieure au :date.',
    'after_or_equal'       => 'Le champ :attribute doit être une date postérieure ou égale au :date.',
    'alpha'                => 'Le champ :attribute doit contenir uniquement des lettres.',
    'alpha_dash'           => 'Le champ :attribute doit contenir uniquement des lettres, des chiffres et des tirets.',
    'alpha_num'            => 'Le champ :attribute doit contenir uniquement des chiffres et des lettres.',
    'array'                => 'Le champ :attribute doit être un tableau.',
    'ascii'                => 'Le champ :attribute ne doit contenir que des caractères alphanumériques et des symboles codés sur un octet.',
    'attached'             => ':attribute est déjà attaché(e).',
    'before'               => 'Le champ :attribute doit être une date antérieure au :date.',
    'before_or_equal'      => 'Le champ :attribute doit être une date antérieure ou égale au :date.',
    'between'              => [
        'array'   => 'Le tableau :attribute doit contenir entre :min et :max éléments.',
        'file'    => 'La taille du fichier de :attribute doit être comprise entre :min et :max kilo-octets.',
        'numeric' => 'La valeur de :attribute doit être comprise entre :min et :max.',
        'string'  => 'Le texte :attribute doit contenir entre :min et :max caractères.',
    ],
    'boolean'              => 'Le champ :attribute doit être vrai ou faux.',
    'can'                  => 'Le champ :attribute contient une valeur non autorisée.',
    'confirmed'            => 'Le champ de confirmation :attribute ne correspond pas.',
    'contains'             => 'The :attribute field is missing a required value.',
    'current_password'     => 'Le mot de passe est incorrect.',
    'date'                 => 'Le champ :attribute n\'est pas une date valide.',
    'date_equals'          => 'Le champ :attribute doit être une date égale à :date.',
    'date_format'          => 'Le champ :attribute ne correspond pas au format :format.',
    'decimal'              => 'Le champ :attribute doit comporter :decimal décimales.',
    'declined'             => 'Le champ :attribute doit être décliné.',
    'declined_if'          => 'Le champ :attribute doit être décliné quand :other a la valeur :value.',
    'different'            => 'Les champs :attribute et :other doivent être différents.',
    'digits'               => 'Le champ :attribute doit contenir :digits chiffres.',
    'digits_between'       => 'Le champ :attribute doit contenir entre :min et :max chiffres.',
    'dimensions'           => 'La taille de l\'image :attribute n\'est pas conforme.',
    'distinct'             => 'Le champ :attribute a une valeur en double.',
    'doesnt_end_with'      => 'Le champ :attribute ne doit pas finir avec une des valeurs suivantes : :values.',
    'doesnt_start_with'    => 'Le champ :attribute ne doit pas commencer avec une des valeurs suivantes : :values.',
    'email'                => 'Le champ :attribute doit être une adresse e-mail valide.',
    'ends_with'            => 'Le champ :attribute doit se terminer par une des valeurs suivantes : :values',
    'enum'                 => 'Le champ :attribute sélectionné est invalide.',
    'exists'               => 'Le champ :attribute sélectionné est invalide.',
    'extensions'           => 'Le champ :attribute doit avoir l\'une des extensions suivantes : :values.',
    'file'                 => 'Le champ :attribute doit être un fichier.',
    'filled'               => 'Le champ :attribute doit avoir une valeur.',
    'gt'                   => [
        'array'   => 'Le tableau :attribute doit contenir plus de :value éléments.',
        'file'    => 'La taille du fichier de :attribute doit être supérieure à :value kilo-octets.',
        'numeric' => 'La valeur de :attribute doit être supérieure à :value.',
        'string'  => 'Le texte :attribute doit contenir plus de :value caractères.',
    ],
    'gte'                  => [
        'array'   => 'Le tableau :attribute doit contenir au moins :value éléments.',
        'file'    => 'La taille du fichier de :attribute doit être supérieure ou égale à :value kilo-octets.',
        'numeric' => 'La valeur de :attribute doit être supérieure ou égale à :value.',
        'string'  => 'Le texte :attribute doit contenir au moins :value caractères.',
    ],
    'hex_color'            => 'Le champ :attribute doit être une couleur hexadécimale valide.',
    'image'                => 'Le champ :attribute doit être une image.',
    'in'                   => 'Le champ :attribute est invalide.',
    'in_array'             => 'Le champ :attribute n\'existe pas dans :other.',
    'integer'              => 'Le champ :attribute doit être un entier.',
    'ip'                   => 'Le champ :attribute doit être une adresse IP valide.',
    'ipv4'                 => 'Le champ :attribute doit être une adresse IPv4 valide.',
    'ipv6'                 => 'Le champ :attribute doit être une adresse IPv6 valide.',
    'json'                 => 'Le champ :attribute doit être un document JSON valide.',
    'list'                 => 'Le champ :attribute doit être une liste.',
    'lowercase'            => 'Le champ :attribute doit être en minuscules.',
    'lt'                   => [
        'array'   => 'Le tableau :attribute doit contenir moins de :value éléments.',
        'file'    => 'La taille du fichier de :attribute doit être inférieure à :value kilo-octets.',
        'numeric' => 'La valeur de :attribute doit être inférieure à :value.',
        'string'  => 'Le texte :attribute doit contenir moins de :value caractères.',
    ],
    'lte'                  => [
        'array'   => 'Le tableau :attribute doit contenir au plus :value éléments.',
        'file'    => 'La taille du fichier de :attribute doit être inférieure ou égale à :value kilo-octets.',
        'numeric' => 'La valeur de :attribute doit être inférieure ou égale à :value.',
        'string'  => 'Le texte :attribute doit contenir au plus :value caractères.',
    ],
    'mac_address'          => 'Le champ :attribute doit être une adresse MAC valide.',
    'max'                  => [
        'array'   => 'Le tableau :attribute ne peut pas contenir plus que :max éléments.',
        'file'    => 'La taille du fichier de :attribute ne peut pas dépasser :max kilo-octets.',
        'numeric' => 'La valeur de :attribute ne peut pas être supérieure à :max.',
        'string'  => 'Le texte de :attribute ne peut pas contenir plus de :max caractères.',
    ],
    'max_digits'           => 'Le champ :attribute ne doit pas avoir plus de :max chiffres.',
    'mimes'                => 'Le champ :attribute doit être un fichier de type : :values.',
    'mimetypes'            => 'Le champ :attribute doit être un fichier de type : :values.',
    'min'                  => [
        'array'   => 'Le tableau :attribute doit contenir au moins :min éléments.',
        'file'    => 'La taille du fichier de :attribute doit être supérieure ou égale à :min kilo-octets.',
        'numeric' => 'La valeur de :attribute doit être supérieure ou égale à :min.',
        'string'  => 'Le texte de :attribute doit contenir au moins :min caractères.',
    ],
    'min_digits'           => 'Le champ :attribute doit avoir au moins :min chiffres.',
    'missing'              => 'Le champ :attribute doit être manquant.',
    'missing_if'           => 'Le champ :attribute doit être manquant quand :other a la valeur :value.',
    'missing_unless'       => 'Le champ :attribute doit être manquant sauf si :other a la valeur :value.',
    'missing_with'         => 'Le champ :attribute doit être manquant quand :values est présent.',
    'missing_with_all'     => 'Le champ :attribute doit être manquant quand :values sont présents.',
    'multiple_of'          => 'La valeur de :attribute doit être un multiple de :value',
    'not_in'               => 'Le champ :attribute sélectionné n\'est pas valide.',
    'not_regex'            => 'Le format du champ :attribute n\'est pas valide.',
    'numeric'              => 'Le champ :attribute doit contenir un nombre.',
    'password'             => [
        'letters'       => 'Le champ :attribute doit contenir au moins une lettre.',
        'mixed'         => 'Le champ :attribute doit contenir au moins une majuscule et une minuscule.',
        'numbers'       => 'Le champ :attribute doit contenir au moins un chiffre.',
        'symbols'       => 'Le champ :attribute doit contenir au moins un symbole.',
        'uncompromised' => 'La valeur du champ :attribute est apparue dans une fuite de données. Veuillez choisir une valeur différente.',
    ],
    'present'              => 'Le champ :attribute doit être présent.',
    'present_if'           => 'Le champ :attribute doit être présent lorsque :other est :value.',
    'present_unless'       => 'Le champ :attribute doit être présent sauf si :other vaut :value.',
    'present_with'         => 'Le champ :attribute doit être présent lorsque :values est présent.',
    'present_with_all'     => 'Le champ :attribute doit être présent lorsque :values sont présents.',
    'prohibited'           => 'Le champ :attribute est interdit.',
    'prohibited_if'        => 'Le champ :attribute est interdit quand :other a la valeur :value.',
    'prohibited_unless'    => 'Le champ :attribute est interdit à moins que :other est l\'une des valeurs :values.',
    'prohibits'            => 'Le champ :attribute interdit :other d\'être présent.',
    'regex'                => 'Le format du champ :attribute est invalide.',
    'relatable'            => ':attribute n\'est sans doute pas associé(e) avec cette donnée.',
    'required'             => 'Le champ :attribute est obligatoire.',
    'required_array_keys'  => 'Le champ :attribute doit contenir des entrées pour : :values.',
    'required_if'          => 'Le champ :attribute est obligatoire quand la valeur de :other est :value.',
    'required_if_accepted' => 'Le champ :attribute est obligatoire quand le champ :other a été accepté.',
    'required_if_declined' => 'The :attribute field is required when :other is declined.',
    'required_unless'      => 'Le champ :attribute est obligatoire sauf si :other est :values.',
    'required_with'        => 'Le champ :attribute est obligatoire quand :values est présent.',
    'required_with_all'    => 'Le champ :attribute est obligatoire quand :values sont présents.',
    'required_without'     => 'Le champ :attribute est obligatoire quand :values n\'est pas présent.',
    'required_without_all' => 'Le champ :attribute est requis quand aucun de :values n\'est présent.',
    'same'                 => 'Les champs :attribute et :other doivent être identiques.',
    'size'                 => [
        'array'   => 'Le tableau :attribute doit contenir :size éléments.',
        'file'    => 'La taille du fichier de :attribute doit être de :size kilo-octets.',
        'numeric' => 'La valeur de :attribute doit être :size.',
        'string'  => 'Le texte de :attribute doit contenir :size caractères.',
    ],
    'starts_with'          => 'Le champ :attribute doit commencer avec une des valeurs suivantes : :values',
    'string'               => 'Le champ :attribute doit être une chaîne de caractères.',
    'timezone'             => 'Le champ :attribute doit être un fuseau horaire valide.',
    'ulid'                 => 'Le champ :attribute doit être un ULID valide.',
    'unique'               => 'La valeur du champ :attribute est déjà utilisée.',
    'uploaded'             => 'Le fichier du champ :attribute n\'a pu être téléversé.',
    'uppercase'            => 'Le champ :attribute doit être en majuscules.',
    'url'                  => 'Le format de l\'URL de :attribute n\'est pas valide.',
    'uuid'                 => 'Le champ :attribute doit être un UUID valide',
    'attributes'           => [
        'address'                  => 'adresse',
        'affiliate_url'            => 'URL d\'affiliation',
        'age'                      => 'âge',
        'amount'                   => 'montant',
        'announcement'             => 'annonce',
        'area'                     => 'zone',
        'audience_prize'           => 'prix du public',
        'available'                => 'disponible',
        'birthday'                 => 'anniversaire',
        'body'                     => 'corps',
        'city'                     => 'ville',
        'compilation'              => 'compilation',
        'concept'                  => 'concept',
        'conditions'               => 'conditions',
        'content'                  => 'contenu',
        'country'                  => 'pays',
        'cover'                    => 'couverture',
        'created_at'               => 'créé à',
        'creator'                  => 'créateur',
        'currency'                 => 'devise',
        'current_password'         => 'mot de passe actuel',
        'customer'                 => 'client',
        'date'                     => 'Date',
        'date_of_birth'            => 'date de naissance',
        'dates'                    => 'Rendez-vous',
        'day'                      => 'jour',
        'deleted_at'               => 'supprimé à',
        'description'              => 'la description',
        'display_type'             => 'Type d\'affichage',
        'district'                 => 'quartier',
        'duration'                 => 'durée',
        'email'                    => 'adresse e-mail',
        'excerpt'                  => 'extrait',
        'filter'                   => 'filtre',
        'finished_at'              => 'terminé à',
        'first_name'               => 'prénom',
        'gender'                   => 'genre',
        'grand_prize'              => 'grand prize',
        'group'                    => 'groupe',
        'hour'                     => 'heure',
        'image'                    => 'image',
        'image_desktop'            => 'image de bureau',
        'image_main'               => 'image principale',
        'image_mobile'             => 'image mobile',
        'images'                   => 'images',
        'is_audience_winner'       => 'est le gagnant du public',
        'is_hidden'                => 'est caché',
        'is_subscribed'            => 'est abonné',
        'is_visible'               => 'est visible',
        'is_winner'                => 'est gagnant',
        'items'                    => 'articles',
        'key'                      => 'clé',
        'last_name'                => 'nom',
        'lesson'                   => 'leçon',
        'line_address_1'           => 'ligne d\'adresse 1',
        'line_address_2'           => 'ligne d\'adresse 2',
        'login'                    => 'se connecter',
        'message'                  => 'message',
        'middle_name'              => 'deuxième prénom',
        'minute'                   => 'minute',
        'mobile'                   => 'portable',
        'month'                    => 'mois',
        'name'                     => 'nom',
        'national_code'            => 'code national',
        'number'                   => 'numéro',
        'password'                 => 'mot de passe',
        'password_confirmation'    => 'confirmation du mot de passe',
        'phone'                    => 'téléphone',
        'photo'                    => 'photo',
        'portfolio'                => 'portefeuille',
        'postal_code'              => 'code postal',
        'preview'                  => 'Aperçu',
        'price'                    => 'prix',
        'product_id'               => 'identifiant du produit',
        'product_uid'              => 'UID du produit',
        'product_uuid'             => 'UUID du produit',
        'promo_code'               => 'code promo',
        'province'                 => 'région',
        'quantity'                 => 'quantité',
        'reason'                   => 'raison',
        'recaptcha_response_field' => 'champ de réponse recaptcha',
        'referee'                  => 'arbitre',
        'referees'                 => 'arbitres',
        'reject_reason'            => 'motif de rejet',
        'remember'                 => 'se souvenir',
        'restored_at'              => 'restauré à',
        'result_text_under_image'  => 'texte de résultat sous l\'image',
        'role'                     => 'rôle',
        'rule'                     => 'règle',
        'rules'                    => 'règles',
        'second'                   => 'seconde',
        'sex'                      => 'sexe',
        'shipment'                 => 'expédition',
        'short_text'               => 'texte court',
        'size'                     => 'taille',
        'skills'                   => 'compétences',
        'slug'                     => 'limace',
        'specialization'           => 'spécialisation',
        'started_at'               => 'commencé à',
        'state'                    => 'état',
        'status'                   => 'statut',
        'street'                   => 'rue',
        'student'                  => 'étudiant',
        'subject'                  => 'sujet',
        'tag'                      => 'étiqueter',
        'tags'                     => 'Mots clés',
        'teacher'                  => 'professeur',
        'terms'                    => 'conditions',
        'test_description'         => 'description test',
        'test_locale'              => 'localisation test',
        'test_name'                => 'nom test',
        'text'                     => 'texte',
        'time'                     => 'heure',
        'title'                    => 'titre',
        'type'                     => 'taper',
        'updated_at'               => 'mis à jour à',
        'user'                     => 'utilisateur',
        'username'                 => 'nom d\'utilisateur',
        'value'                    => 'valeur',
        'year'                     => 'année',
    ],
];


================================================
FILE: resources/lang/fr.json
================================================
{
    "(and :count more error)": "(et :count erreur en plus)",
    "(and :count more errors)": "(et :count erreur en plus)|(et :count erreurs en plus)|(et :count erreurs en plus)",
    "A new verification link has been sent to the email address you provided in your profile settings.": "Un nouveau lien de vérification a été envoyé à l'adresse e-mail que vous avez indiquée dans vos paramètres de profil.",
    "A new verification link has been sent to your email address.": "Un nouveau lien de vérification a été envoyé à votre adresse e-mail.",
    "A Timeout Occurred": "Un dépassement de délai s'est produit",
    "Accept": "Accepter",
    "Accept Invitation": "Accepter l'invitation",
    "Accepted": "Accepté",
    "Action": "Action",
    "Actions": "Actions",
    "Add": "Ajouter",
    "Add :name": "Ajouter :name",
    "Add a new team member to your team, allowing them to collaborate with you.": "Ajouter un nouveau membre de l'équipe à votre équipe, lui permettant de collaborer avec vous.",
    "Add additional security to your account using two factor authentication.": "Ajouter une sécurité supplémentaire à votre compte en utilisant l'authentification à deux facteurs.",
    "Add Team Member": "Ajouter un membre d'équipe",
    "Added.": "Ajouté.",
    "Admin": "Administrateur",
    "Administrator": "Administrateur",
    "Administrator users can perform any action.": "Les administrateurs peuvent effectuer n'importe quelle action.",
    "Agree": "Accepter",
    "All of the people that are part of this team.": "Toutes les personnes faisant partie de cette équipe.",
    "All rights reserved.": "Tous droits réservés.",
    "Already registered?": "Déjà inscrit·e ?",
    "Already Reported": "Déjà rapporté",
    "API Token": "Jeton API",
    "API Token Permissions": "Autorisations de jeton API",
    "API Tokens": "Jeton API",
    "API tokens allow third-party services to authenticate with our application on your behalf.": "Les jetons API permettent à des services tiers de s'authentifier auprès de notre application en votre nom.",
    "Archive": "Archive",
    "Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.": "Êtes-vous sûr·e de vouloir supprimer cette équipe ? Lorsqu'une équipe est supprimée, toutes les données associées seront définitivement supprimées.",
    "Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.": "Êtes-vous sûr·e de vouloir supprimer votre compte ? Une fois que votre compte est supprimé, toutes les données associées seront supprimées définitivement. Pour confirmer que vous voulez supprimer définitivement votre compte, renseignez votre mot de passe.",
    "Are you sure you would like to delete this API token?": "Êtes-vous sûr·e de vouloir supprimer ce jeton API ?",
    "Are you sure you would like to leave this team?": "Êtes-vous sûr·e de vouloir quitter cette équipe ?",
    "Are you sure you would like to remove this person from the team?": "Êtes-vous sûr·e de vouloir supprimer cette personne de cette équipe ?",
    "Assign": "Attribuer",
    "Associate": "Associé",
    "Attach": "Attacher",
    "Bad Gateway": "Mauvaise passerelle",
    "Bad Request": "Mauvaise Demande",
    "Bandwidth Limit Exceeded": "Limite de bande passante dépassée",
    "Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.": "Avant de continuer, pourriez-vous vérifier votre adresse e-mail en cliquant sur le lien de vérification que l'on vient de vous envoyer ? Si vous n'avez pas reçu l'e-mail, nous vous en enverrons un autre avec plaisir.",
    "Browse": "Parcourir",
    "Browser Sessions": "Sessions de navigateur",
    "Cancel": "Annuler",
    "Choose": "Choisir",
    "Choose :name": "Choisissez :name",
    "Choose File": "Choisir le fichier",
    "Choose Image": "Choisir une image",
    "Click here to re-send the verification email.": "Cliquez ici pour renvoyer l'e-mail de vérification.",
    "Click to copy": "Cliquez pour copier",
    "Client Closed Request": "Demande fermée du client",
    "Close": "Fermer",
    "Code": "Code",
    "Collapse": "Effondrement",
    "Collapse All": "Réduire tout",
    "Comment": "Commentaire",
    "Confirm": "Confirmer",
    "Confirm Password": "Confirmer le mot de passe",
    "Conflict": "Conflit",
    "Connect": "Connecter",
    "Connection Closed Without Response": "Connexion fermée sans réponse",
    "Connection Timed Out": "La connexion a expiré",
    "Continue": "Continuer",
    "Create": "Créer",
    "Create :name": "Créer :name",
    "Create a new team to collaborate with others on projects.": "Créer une nouvelle équipe pour collaborer avec d'autres personnes sur des projets.",
    "Create Account": "Créer un compte",
    "Create API Token": "Créer un jeton API",
    "Create New Team": "Créer une nouvelle équipe",
    "Create Team": "Créer l'équipe",
    "Created": "Créé",
    "Created.": "Créé·e.",
    "Current Password": "Mot de passe actuel",
    "Dashboard": "Tableau de bord",
    "Delete": "Supprimer",
    "Delete :name": "Supprimer :name",
    "Delete Account": "Supprimer le compte",
    "Delete API Token": "Supprimer le jeton API",
    "Delete Team": "Supprimer l'équipe",
    "Detach": "Détacher",
    "Details": "Détails",
    "Disable": "Désactiver",
    "Discard": "Jeter",
    "Done": "Fait",
    "Done.": "Terminé.",
    "Down": "Vers le bas",
    "Duplicate": "Dupliquer",
    "Duplicate :name": "Dupliquer :name",
    "Edit": "Éditer",
    "Edit :name": "Modifier :name",
    "Edit Profile": "Éditer le profil",
    "Editor": "Éditeur",
    "Editor users have the ability to read, create, and update.": "Les éditeurs peuvent lire, créer et mettre à jour",
    "Email": "E-mail",
    "Email Password Reset Link": "Lien de réinitialisation du mot de passe",
    "Enable": "Activer",
    "Ensure your account is using a long, random password to stay secure.": "Assurez-vous d'utiliser un mot de passe long et aléatoire pour sécuriser votre compte.",
    "errors": "les erreurs",
    "Expand": "Développer",
    "Expand All": "Développer tout",
    "Expectation Failed": "Échec de l'attente",
    "Explanation": "Explication",
    "Export": "Exporter",
    "Export :name": "Export :name",
    "Failed Dependency": "Dépendance échouée",
    "File": "Déposer",
    "Files": "Des dossiers",
    "Finish enabling two factor authentication.": "Terminez l'activation de l'authentification à deux facteurs.",
    "For your security, please confirm your password to continue.": "Par mesure de sécurité, veuillez confirmer votre mot de passe pour continuer.",
    "Forbidden": "Interdit",
    "Forgot your password?": "Mot de passe oublié ?",
    "Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.": "Mot de passe oublié ? Pas de soucis. Veuillez nous indiquer votre adresse e-mail et nous vous enverrons un lien de réinitialisation du mot de passe.",
    "Found": "A trouvé",
    "Gateway Timeout": "Délai d'attente de la passerelle",
    "Go Home": "Aller à l'accueil",
    "Go to page :page": "Aller à la page :page",
    "Gone": "Disparu",
    "Great! You have accepted the invitation to join the :team team.": "Super ! Vous avez accepté l'invitation à rejoindre l'équipe :team",
    "Hello!": "Bonjour !",
    "Hide": "Cacher",
    "Hide :name": "Masquer :name",
    "Home": "Maison",
    "HTTP Version Not Supported": "Version HTTP non prise en charge",
    "I agree to the :terms_of_service and :privacy_policy": "Je suis d'accord avec :terms_of_service et :privacy_policy",
    "I'm a teapot": "Je suis une théière",
    "If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.": "Si nécessaire, vous pouvez vous déconnecter de toutes vos autres sessions de navigateurs ouvertes sur tous vos appareils. Vos dernières sessions sont listées ci-dessous ; cependant, cette liste peut ne pas être exhaustive. Si vous pensez que votre compte a été compromis, vous devriez également mettre à jour votre mot de passe.",
    "If you already have an account, you may accept this invitation by clicking the button below:": "Si vous avez déjà un compte, vous pouvez accepter cette invitation en cliquant sur le bouton ci-dessous :",
    "If you did not create an account, no further action is required.": "Si vous n'avez pas créé de compte, vous pouvez ignorer ce message.",
    "If you did not expect to receive an invitation to this team, you may discard this email.": "Si vous n'attendiez pas d'invitation de cette équipe, vous pouvez supprimer cet e-mail.",
    "If you did not request a password reset, no further action is required.": "Si vous n'avez pas demandé de réinitialisation de mot de passe, vous pouvez ignorer ce message.",
    "If you do not have an account, you may create one by clicking the button below. After creating an account, you may click the invitation acceptance button in this email to accept the team invitation:": "Si vous n'avez pas de compte, vous pouvez en créer un en cliquant sur le bouton ci-dessous. Ensuite, vous pourrez cliquer sur le bouton de cet e-mail pour accepter l'invitation de rejoindre l'équipe :",
    "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "Si vous avez des difficultés à cliquer sur le bouton \":actionText\", copiez et collez l'URL ci-dessous\ndans votre navigateur Web :",
    "IM Used": "J'ai l'habitude",
    "Image": "Image",
    "Impersonate": "Utiliser un autre compte",
    "Impersonation": "Imitation",
    "Import": "Importer",
    "Import :name": "Importer :name",
    "Insufficient Storage": "Espace insuffisant",
    "Internal Server Error": "Erreur Interne du Serveur",
    "Introduction": "Introduction",
    "Invalid JSON was returned from the route.": "Un JSON non valide a été renvoyé par la route.",
    "Invalid SSL Certificate": "Certificat SSL invalide",
    "Last active": "Dernier actif",
    "Last used": "Dernière utilisation",
    "Leave": "Quitter",
    "Leave Team": "Quitter l'équipe",
    "length": "length",
    "Length Required": "Longueur requise",
    "Like": "Comme",
    "Load": "Charger",
    "Localize": "Localiser",
    "Location": "Emplacement",
    "Locked": "Fermé à clef",
    "Log In": "Se connecter",
    "Log in": "Se connecter",
    "Log Out": "Se déconnecter",
    "Log Out Other Browser Sessions": "Déconnecter les sessions ouvertes sur d'autres navigateurs",
    "Login": "Connexion",
    "Logout": "Déconnexion",
    "Loop Detected": "Boucle détectée",
    "Maintenance Mode": "Mode de Maintenance",
    "Manage Account": "Gérer le compte",
    "Manage and log out your active sessions on other browsers and devices.": "Gérer et déconnecter vos sessions actives sur les autres navigateurs et appareils.",
    "Manage API Tokens": "Gérer les jetons API",
    "Manage Role": "Gérer le rôle",
    "Manage Team": "Gérer l'équipe",
    "Method Not Allowed": "Méthode Non Autorisée",
    "Misdirected Request": "Demande mal dirigée",
    "Moved Permanently": "Déplacé de façon permanente",
    "Multi-Status": "Multi-statut",
    "Multiple Choices": "Choix multiples",
    "Name": "Nom",
    "Network Authentication Required": "Authentification réseau requise",
    "Network Connect Timeout Error": "Erreur de délai de connexion réseau",
    "Network Read Timeout Error": "Erreur de délai de lecture réseau",
    "New": "Nouveau",
    "New :name": "Nouveau :name",
    "New Password": "Nouveau mot de passe",
    "No": "Non",
    "No Content": "Pas de contenu",
    "Non-Authoritative Information": "Informations non autorisées",
    "Not Acceptable": "Pas acceptable",
    "Not Extended": "Non prolongé",
    "Not Found": "Non trouvé",
    "Not Implemented": "Pas mis en œuvre",
    "Not Modified": "Non modifié",
    "of": "de",
    "OK": "OK",
    "Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.": "Une fois qu'une équipe est supprimée, toutes ses données seront supprimées définitivement. Avant de supprimer cette équipe, veuillez télécharger toutes données ou informations de cette équipe.",
    "Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.": "Une fois que votre compte est supprimé, toutes vos données sont supprimées définitivement. Avant de supprimer votre compte, veuillez télécharger vos données.",
    "Open": "Ouvrir",
    "Open in a current window": "Ouvrir dans une fenêtre actuelle",
    "Open in a new window": "Ouvrir dans une nouvelle fenêtre",
    "Open in a parent frame": "Ouvrir dans un frame parent",
    "Open in the topmost frame": "Ouvrir dans le cadre le plus haut",
    "Open on the website": "Ouvert sur le site",
    "Origin Is Unreachable": "L'origine est inaccessible",
    "Page Expired": "Page expirée",
    "Pagination Navigation": "Pagination",
    "Partial Content": "Contenu partiel",
    "Password": "Mot de passe",
    "Payload Too Large": "Charge utile trop grande",
    "Payment Required": "Paiement requis",
    "Pending Team Invitations": "Invitations d'équipe en attente",
    "Permanent Redirect": "Redirection permanente",
    "Permanently delete this team.": "Supprimer définitivement cette équipe.",
    "Permanently delete your account.": "Supprimer définitivement votre compte.",
    "Permissions": "Permissions",
    "Photo": "Image",
    "Please click the button below to verify your email address.": "Veuillez cliquer sur le bouton ci-dessous pour vérifier votre adresse e-mail :",
    "Please confirm access to your account by entering one of your emergency recovery codes.": "Veuillez confirmer l'accès à votre compte en entrant l'un des codes de récupération d'urgence.",
    "Please confirm access to your account by entering the authentication code provided by your authenticator application.": "Veuillez confirmer l'accès à votre compte en entrant le code d'authentification fourni par votre application d'authentification.",
    "Please copy your new API token. For your security, it won't be shown again.": "Veuillez copier votre nouveau token API. Pour votre sécurité, il ne sera pas ré-affiché.",
    "Please enter your password to confirm you would like to log out of your other browser sessions across all of your devices.": "Veuillez entrer votre mot de passe pour confirmer que vous voulez déconnecter toutes les autres sessions de navigateurs sur l'ensemble de vos appareils.",
    "Please provide the email address of the person you would like to add to this team.": "Veuillez indiquer l'adresse e-mail de la personne que vous souhaitez ajouter à cette équipe.",
    "Precondition Failed": "La précondition a échoué",
    "Precondition Required": "Condition préalable requise",
    "Preview": "Aperçu",
    "Price": "Prix",
    "Privacy Policy": "Politique de confidentialité",
    "Processing": "En traitement",
    "Profile": "Profil",
    "Profile Information": "Informations du profil",
    "Proxy Authentication Required": "Authentification proxy requise",
    "Railgun Error": "Erreur de Railgun",
    "Range Not Satisfiable": "Plage non satisfaisante",
    "Record": "Enregistrer",
    "Recovery Code": "Code de récupération",
    "Regards": "Cordialement",
    "Regenerate Recovery Codes": "Régénérer les codes de récupération",
    "Register": "Inscription",
    "Remember me": "Se souvenir de moi",
    "Remove": "Supprimer",
    "Remove Photo": "Supprimer l'image",
    "Remove Team Member": "Supprimer le membre d'équipe",
    "Request Header Fields Too Large": "Champs d'en-tête de requête trop grands",
    "Request Timeout": "Délai d'expiration de la demande",
    "Resend Verification Email": "Renvoyer l'e-mail de vérification",
    "Reset Content": "Réinitialiser le contenu",
    "Reset Password": "Réinitialisation du mot de passe",
    "Reset Password Notification": "Notification de réinitialisation du mot de passe",
    "Restore": "Restaurer",
    "Restore :name": "Restaurer :name",
    "results": "résultats",
    "Retry With": "Réessayer avec",
    "Role": "Rôle",
    "Save": "Sauvegarder",
    "Save & Close": "Sauvegarder et fermer",
    "Save & Return": "Enregistrer et retourner",
    "Save :name": "Économisez :name",
    "Saved.": "Sauvegardé.",
    "Search": "Rechercher",
    "Search :name": "Recherche :name",
    "See Other": "Voir autre",
    "Select": "Sélectionner",
    "Select A New Photo": "Sélectionner une nouvelle image",
    "Select All": "Tout sélectionner",
    "Send": "Envoyer",
    "Server Error": "Erreur serveur",
    "Service Unavailable": "Service indisponible",
    "Session Has Expired": "La session a expiré",
    "Settings": "Paramètres",
    "Setup Key": "Clé de configuration",
    "Show": "Montrer",
    "Show :name": "Afficher :name",
    "Show All": "Afficher tout",
    "Show Recovery Codes": "Afficher les codes de récupération",
    "Showing": "Montrant",
    "Sign In": "Se connecter",
    "Solve": "Résoudre",
    "SSL Handshake Failed": "Échec de la prise de contact SSL",
    "Start": "Commencer",
    "Stop": "Arrêter",
    "Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.": "Enregistrez ces codes dans un gestionnaire de mot de passe sécurisé. Ils peuvent être réutilisés pour accéder à votre compte si l'authentification à deux facteurs n'aboutit pas.",
    "Submit": "Soumettre",
    "Subscribe": "S'abonner",
    "Switch": "Changer",
    "Switch Teams": "Permuter les équipes",
    "Switch To Role": "Passer au rôle",
    "Switching Protocols": "Protocoles de commutation",
    "Tag": "Étiqueter",
    "Tags": "Mots clés",
    "Team Details": "Détails de l'équipe",
    "Team Invitation": "Invitation d'équipe",
    "Team Members": "Membres de l'équipe",
    "Team Name": "Nom de l'équipe",
    "Team Owner": "Propriétaire de l'équipe",
    "Team Settings": "Préférences de l'équipe",
    "Temporary Redirect": "Redirection temporaire",
    "Terms of Service": "Conditions d'utilisation",
    "The :attribute must be a valid role.": "Le :attribute doit être un rôle valide.",
    "The :attribute must be at least :length characters and contain at least one number.": "Le champ :attribute doit avoir au moins :length caractères et contenir au moins un chiffre.",
    "The :attribute must be at least :length characters and contain at least one special character and one number.": "Le champ :attribute doit avoir au moins :length caractères et contenir au moins un caractère spécial et un nombre.",
    "The :attribute must be at least :length characters and contain at least one special character.": "Le champ :attribute doit avoir au moins :length caractères et contenir au moins un caractère spécial.",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one number.": "Le champ :attribute doit avoir au moins :length caractères et contenir au moins une majuscule et un chiffre.",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one special character.": "Le champ :attribute doit avoir au moins :length caractères et contenir au moins une majuscule et un caractère spécial.",
    "The :attribute must be at least :length characters and contain at least one uppercase character, one number, and one special character.": "Le champ :attribute doit avoir au moins :length caractères, et contenir au moins une majuscule, un chiffre et un caractère spécial.",
    "The :attribute must be at least :length characters and contain at least one uppercase character.": "Le champ :attribute doit avoir au moins :length caractères et au moins une majuscule.",
    "The :attribute must be at least :length characters.": "Le champ :attribute doit avoir au moins :length caractères.",
    "The given data was invalid.": "La donnée renseignée est incorrecte.",
    "The password is incorrect.": "Le mot de passe est incorrect.",
    "The provided password does not match your current password.": "Le mot de passe indiqué ne correspond pas à votre mot de passe actuel.",
    "The provided password was incorrect.": "Le mot de passé indiqué est incorrect.",
    "The provided two factor authentication code was invalid.": "Le code d'authentification à deux facteurs fourni est incorrect.",
    "The provided two factor recovery code was invalid.": "Le code de récupération fourni pour l'authentification à deux facteurs est incorrect.",
    "The response is not a streamed response.": "La réponse n'est pas une réponse diffusée.",
    "The response is not a view.": "La réponse n'est pas une vue.",
    "The team's name and owner information.": "Les informations concernant l'équipe et son propriétaire.",
    "These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.": "Ces personnes ont été invitées à rejoindre votre équipe et ont été prévenues avec un e-mail d'invitation. Ils peuvent rejoindre l'équipe grâce à l'e-mail d'invitation.",
    "This action is unauthorized.": "Cette action n'est pas autorisée.",
    "This device": "Cet appareil",
    "This is a secure area of the application. Please confirm your password before continuing.": "Ceci est une zone sécurisée de l'application. Veuillez confirmer votre mot de passe avant de continuer.",
    "This password does not match our records.": "Ce mot de passe ne correspond pas à nos enregistrements.",
    "This password reset link will expire in :count minutes.": "Ce lien de réinitialisation du mot de passe expirera dans :count minutes.",
    "This user already belongs to the team.": "Cet utilisateur appartient déjà à l'équipe.",
    "This user has already been invited to the team.": "Cet utilisateur a déjà été invité à rejoindre l'équipe.",
    "to": "à",
    "To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.": "Pour terminer l'activation de l'authentification à deux facteurs, scannez le code QR suivant à l'aide de l'application d'authentification de votre téléphone ou entrez la clé de configuration et fournissez le code OTP généré.",
    "Toggle navigation": "Afficher / masquer le menu de navigation",
    "Token Name": "Nom du jeton",
    "Too Early": "Trop tôt",
    "Too Many Requests": "Trop de requêtes",
    "Translate": "Traduire",
    "Translate It": "Traduis le",
    "Two Factor Authentication": "Authentification à deux facteurs",
    "Two factor authentication is now enabled. Scan the following QR code using your phone's authenticator application or enter the setup key.": "L'authentification à deux facteurs est maintenant activée. Scannez le code QR suivant à l'aide de l'application d'authentification de votre téléphone ou entrez la clé de configuration.",
    "Unauthorized": "Non autorisé",
    "Unavailable For Legal Reasons": "Indisponible pour des raisons légales",
    "Unknown": "Inconnu·e",
    "Unknown Error": "Erreur inconnue",
    "Unpack": "Déballer",
    "Unprocessable Entity": "Entité non traitable",
    "Unsubscribe": "Se désabonner",
    "Unsupported Media Type": "Type de support non supporté",
    "Up": "En haut",
    "Update": "Mettre à jour",
    "Update :name": "Mise à jour :name",
    "Update Password": "Mettre à jour le mot de passe",
    "Update your account's profile information and email address.": "Modifier le profil associé à votre compte ainsi que votre adresse e-mail.",
    "Upgrade Required": "Mise à niveau requise",
    "URI Too Long": "URI trop long",
    "Use a recovery code": "Utiliser un code de récupération",
    "Use an authentication code": "Utiliser un code d'authentification",
    "Use Proxy": "Utiliser un proxy",
    "User": "Utilisateur",
    "Variant Also Negotiates": "La variante négocie également",
    "Verify Email Address": "Vérifier l'adresse e-mail",
    "View": "Vue",
    "View :name": "Voir :name",
    "We were unable to find a registered user with this email address.": "Nous n'avons pas pu trouver un utilisateur enregistré avec cette adresse e-mail.",
    "Web Server is Down": "Le serveur Web est en panne",
    "When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.": "Lorsque l'authentification à deux facteurs est activée, vous serez invité à saisir un jeton aléatoire sécurisé lors de l'authentification. Vous pouvez récupérer ce jeton depuis l'application Google Authenticator de votre téléphone.",
    "Whoops!": "Oups !",
    "Whoops! Something went wrong.": "Oups ! Un problème est survenu.",
    "Yes": "Oui",
    "You are receiving this email because we received a password reset request for your account.": "Vous recevez cet e-mail car nous avons reçu une demande de réinitialisation de mot de passe pour votre compte.",
    "You have been invited to join the :team team!": "Vous avez été invité·e à rejoindre l'équipe :team !",
    "You have enabled two factor authentication.": "Vous avez activé l'authentification à deux facteurs.",
    "You have not enabled two factor authentication.": "Vous n'avez pas activé l'authentification à deux facteurs.",
    "You may accept this invitation by clicking the button below:": "Vous pouvez accepter cette invitation en cliquant sur le bouton ci-dessous :",
    "You may delete any of your existing tokens if they are no longer needed.": "Vous pouvez supprimer n'importe lequel de vos jetons existants s'ils ne sont plus nécessaires.",
    "You may not delete your personal team.": "Vous ne pouvez pas supprimer votre équipe personnelle.",
    "You may not leave a team that you created.": "Vous ne pouvez pas quitter une équipe que vous avez créée.",
    "Your email address is unverified.": "Votre adresse e-mail n'est pas vérifiée."
}

================================================
FILE: resources/lang/ru/actions.php
================================================
<?php

declare(strict_types=1);

return [
    'accept'          => 'Принять',
    'action'          => 'Действие',
    'actions'         => 'Действия',
    'add'             => 'Добавить',
    'admin'           => 'Панель администратора',
    'agree'           => 'Согласен(на)',
    'archive'         => 'Архив',
    'assign'          => 'Назначить',
    'associate'       => 'Ассоциировать',
    'attach'          => 'Прикрепить',
    'browse'          => 'Просмотр',
    'cancel'          => 'Отмена',
    'choose'          => 'Выбрать',
    'choose_file'     => 'Выбрать файл',
    'choose_image'    => 'Выбрать изображение',
    'click_to_copy'   => 'Скопировать',
    'close'           => 'Закрыть',
    'collapse'        => 'Свернуть',
    'collapse_all'    => 'Свернуть всё',
    'comment'         => 'Комментарий',
    'confirm'         => 'Подтвердить',
    'connect'         => 'Подключить',
    'create'          => 'Создать',
    'delete'          => 'Удалить',
    'detach'          => 'Открепить',
    'details'         => 'Подробнее',
    'disable'         => 'Отключить',
    'discard'         => 'Отказаться',
    'done'            => 'Готово',
    'down'            => 'Вниз',
    'duplicate'       => 'Дублировать',
    'edit'            => 'Редактировать',
    'enable'          => 'Включить',
    'expand'          => 'Раскрыть',
    'expand_all'      => 'Раскрыть всё',
    'explanation'     => 'Объяснить',
    'export'          => 'Экспорт',
    'file'            => 'Файл',
    'files'           => 'Файлы',
    'go_home'         => 'Вернуться на главную',
    'hide'            => 'Скрыть',
    'home'            => 'На главную',
    'image'           => 'Изображение',
    'impersonate'     => 'Войти под пользователем',
    'impersonation'   => 'Войти под пользователем',
    'import'          => 'Импорт',
    'introduction'    => 'Введение',
    'like'            => 'Нравится',
    'load'            => 'Загрузить',
    'localize'        => 'Локализовать',
    'log_in'          => 'Войти',
    'log_out'         => 'Выйти',
    'named'           => [
        'add'       => 'Добавить :name',
        'choose'    => 'Выбрать :name',
        'create'    => 'Создать :name',
        'delete'    => 'Удалить :name',
        'duplicate' => 'Дублировать :name',
        'edit'      => 'Редактировать :name',
        'export'    => 'Экспортировать :name',
        'hide'      => 'Скрыть :name',
        'import'    => 'Импорт :name',
        'new'       => 'Новый :name',
        'restore'   => 'Восстановить :name',
        'save'      => 'Сохранить :name',
        'search'    => 'Искать :name',
        'show'      => 'Показать :name',
        'update'    => 'Обновить :name',
        'view'      => 'Просмотреть :name',
    ],
    'new'             => 'Новый',
    'no'              => 'Нет',
    'open'            => 'Открыть',
    'open_website'    => 'Открыть на сайте',
    'preview'         => 'Предпросмотр',
    'price'           => 'Цена',
    'record'          => 'Запись',
    'restore'         => 'Восстановить',
    'save'            => 'Сохранить',
    'save_and_close'  => 'Сохранить и закрыть',
    'save_and_return' => 'Сохранить и вернуться',
    'search'          => 'Поиск',
    'select'          => 'Выбрать',
    'select_all'      => 'Выбрать всё',
    'send'            => 'Отправить',
    'settings'        => 'Настройки',
    'show'            => 'Показать',
    'show_all'        => 'Показать всё',
    'sign_in'         => 'Регистрация',
    'solve'           => 'Решить',
    'start'           => 'Начать',
    'stop'            => 'Остановить',
    'submit'          => 'Отправить',
    'subscribe'       => 'Подписаться',
    'switch'          => 'Переключить',
    'switch_to_role'  => 'Переключиться на роль',
    'tag'             => 'Тег',
    'tags'            => 'Теги',
    'target_link'     => [
        'blank'  => 'Открыть в новом окне',
        'parent' => 'Открыть в родительском фрейме',
        'self'   => 'Открыть в текущем окне',
        'top'    => 'Открыть в главном фрейме',
    ],
    'translate'       => 'Перевод',
    'translate_it'    => 'Перевести',
    'unpack'          => 'Распаковать',
    'unsubscribe'     => 'Отписаться',
    'up'              => 'Вверх',
    'update'          => 'Обновить',
    'user'            => 'Пользователь',
    'view'            => 'Просмотр',
    'yes'             => 'Да',
];


================================================
FILE: resources/lang/ru/auth.php
================================================
<?php

declare(strict_types=1);

return [
    'failed'   => 'Неверное имя пользователя или пароль.',
    'password' => 'Некорректный пароль.',
    'throttle' => 'Слишком много попыток входа. Пожалуйста, попробуйте ещё раз через :seconds секунд.',
];


================================================
FILE: resources/lang/ru/http-statuses.php
================================================
<?php

declare(strict_types=1);

return [
    '0'            => 'Неизвестная ошибка',
    '100'          => 'Продолжить',
    '101'          => 'Переключение протоколов',
    '102'          => 'Идет обработка',
    '200'          => 'ОК',
    '201'          => 'Создано',
    '202'          => 'Принято',
    '203'          => 'Информация не авторитетна',
    '204'          => 'Содержимое отсутствует',
    '205'          => 'Сброс содержимого',
    '206'          => 'Не полное содержимое',
    '207'          => 'Много статусов',
    '208'          => 'Уже сообщалось',
    '226'          => 'Использовано IM',
    '300'          => 'Много вариантов',
    '301'          => 'Перемещено навсегда',
    '302'          => 'Найдено',
    '303'          => 'Смотри другое',
    '304'          => 'Не изменялось',
    '305'          => 'Используй прокси',
    '307'          => 'Временное перенаправление',
    '308'          => 'Постоянное перенаправление',
    '400'          => 'Некорректный запрос',
    '401'          => 'Не авторизован',
    '402'          => 'Необходима оплата',
    '403'          => 'Доступ запрещен',
    '404'          => 'Не найдено',
    '405'          => 'Метод запрещён',
    '406'          => 'Неприемлемо',
    '407'          => 'Требуется аутентификация прокси',
    '408'          => 'Истекло время ожидания',
    '409'          => 'Конфликт',
    '410'          => 'Удалено',
    '411'          => 'Необходима длина',
    '412'          => 'Условие ложно',
    '413'          => 'Большой объём данных',
    '414'          => 'URI слишком длинный',
    '415'          => 'Неподдерживаемый тип данных',
    '416'          => 'Диапазон недостижим',
    '417'          => 'Истекло время ожидания',
    '418'          => 'Я - чайник',
    '419'          => 'Сессия устарела',
    '421'          => 'Неверный запрос',
    '422'          => 'Необрабатываемый экземпляр',
    '423'          => 'Доступ заблокирован',
    '424'          => 'Ошибка зависимости',
    '425'          => 'Слишком рано',
    '426'          => 'Требуется обновление',
    '428'          => 'Требуется предусловие',
    '429'          => 'Слишком много запросов',
    '431'          => 'Поля заголовка слишком большие',
    '444'          => 'Соединение закрыто без ответа',
    '449'          => 'Повторить с',
    '451'          => 'Недоступно по юридическим причинам',
    '499'          => 'Запрос закрыт клиентом',
    '500'          => 'Внутренняя ошибка',
    '501'          => 'Не реализовано',
    '502'          => 'Проблема с шлюзом',
    '503'          => 'Ведутся технические работы',
    '504'          => 'Шлюз не отвечает',
    '505'          => 'Версия HTTP не поддерживается',
    '506'          => 'Вариант тоже проводит согласование',
    '507'          => 'Переполнение хранилища',
    '508'          => 'Обнаружен бесконечный цикл',
    '509'          => 'Превышена нагрузка на канал связи',
    '510'          => 'Не расширено',
    '511'          => 'Требуется сетевая аутентификация',
    '520'          => 'Неизвестная ошибка',
    '521'          => 'Веб-сервер не работает',
    '522'          => 'Соединение не отвечает',
    '523'          => 'Источник недоступен',
    '524'          => 'Истекло время ожидания',
    '525'          => 'Квитирование SSL не удалось',
    '526'          => 'Недействительный SSL сертификат',
    '527'          => 'Ошибка соединения с Railgun',
    '598'          => 'Истекло время ожидания',
    '599'          => 'Истекло время подключения',
    'unknownError' => 'Неизвестная ошибка',
];


================================================
FILE: resources/lang/ru/pagination.php
================================================
<?php

declare(strict_types=1);

return [
    'next'     => 'Вперёд &raquo;',
    'previous' => '&laquo; Назад',
];


================================================
FILE: resources/lang/ru/passwords.php
================================================
<?php

declare(strict_types=1);

return [
    'reset'     => 'Ваш пароль был сброшен.',
    'sent'      => 'Ссылка на сброс пароля была отправлена.',
    'throttled' => 'Пожалуйста, подождите перед повторной попыткой.',
    'token'     => 'Ошибочный код сброса пароля.',
    'user'      => 'Не удалось найти пользователя с указанным электронным адресом.',
];


================================================
FILE: resources/lang/ru/validation.php
================================================
<?php

declare(strict_types=1);

return [
    'accepted'             => 'Вы должны принять :attribute.',
    'accepted_if'          => 'Вы должны принять :attribute, когда :other содержит :value.',
    'active_url'           => 'Значение поля :attribute должно быть действительным URL адресом.',
    'after'                => 'Значение поля :attribute должно быть датой после :date.',
    'after_or_equal'       => 'Значение поля :attribute должно быть датой после или равной :date.',
    'alpha'                => 'Значение поля :attribute может содержать только буквы.',
    'alpha_dash'           => 'Значение поля :attribute может содержать только буквы, цифры, дефис и нижнее подчеркивание.',
    'alpha_num'            => 'Значение поля :attribute может содержать только буквы и цифры.',
    'array'                => 'Значение поля :attribute должно быть массивом.',
    'ascii'                => 'Значение поля :attribute должно содержать только однобайтовые цифро-буквенные символы.',
    'attached'             => 'Поле :attribute уже прикреплено.',
    'before'               => 'Значение поля :attribute должно быть датой до :date.',
    'before_or_equal'      => 'Значение поля :attribute должно быть датой до или равной :date.',
    'between'              => [
        'array'   => 'Количество элементов в поле :attribute должно быть от :min до :max.',
        'file'    => 'Размер файла в поле :attribute должен быть от :min до :max Кб.',
        'numeric' => 'Значение поля :attribute должно быть от :min до :max.',
        'string'  => 'Количество символов в поле :attribute должно быть от :min до :max.',
    ],
    'boolean'              => 'Значение поля :attribute должно быть логического типа.',
    'can'                  => 'Значение поля :attribute должно быть авторизованным.',
    'confirmed'            => 'Значение поля :attribute не совпадает с подтверждаемым.',
    'contains'             => 'В поле :attribute отсутствует необходимое значение.',
    'current_password'     => 'Неверный пароль.',
    'date'                 => 'Значение поля :attribute должно быть корректной датой.',
    'date_equals'          => 'Значение поля :attribute должно быть датой равной :date.',
    'date_format'          => 'Значение поля :attribute должно соответствовать формату даты: :format.',
    'decimal'              => 'Значение поля :attribute должно содержать :decimal цифр десятичных разрядов.',
    'declined'             => 'Значение поля :attribute должно быть отклонено.',
    'declined_if'          => 'Значение поля :attribute должно быть отклонено, когда :other содержит :value.',
    'different'            => 'Значения полей :attribute и :other должны различаться.',
    'digits'               => 'Количество символов в поле :attribute должно быть равным :digits.',
    'digits_between'       => 'Количество символов в поле :attribute должно быть от :min до :max.',
    'dimensions'           => 'Изображение, указанное в поле :attribute, имеет недопустимые размеры.',
    'distinct'             => 'Элементы в значении поля :attribute не должны повторяться.',
    'doesnt_end_with'      => 'Значение поля :attribute не должно заканчиваться одним из следующих: :values.',
    'doesnt_start_with'    => 'Значение поля :attribute не должно начинаться с одного из следующих: :values.',
    'email'                => 'Значение поля :attribute должно быть действительным электронным адресом.',
    'ends_with'            => 'Значение поля :attribute должно заканчиваться одним из следующих: :values',
    'enum'                 => 'Значение поля :attribute отсутствует в списке разрешённых.',
    'exists'               => 'Значение поля :attribute не существует.',
    'extensions'           => 'Файл в поле :attribute должен иметь одно из следующих расширений: :values.',
    'file'                 => 'В поле :attribute должен быть указан файл.',
    'filled'               => 'Значение поля :attribute обязательно для заполнения.',
    'gt'                   => [
        'array'   => 'Количество элементов в поле :attribute должно быть больше :value.',
        'file'    => 'Размер файла, указанный в поле :attribute, должен быть больше :value Кб.',
        'numeric' => 'Значение поля :attribute должно быть больше :value.',
        'string'  => 'Количество символов в поле :attribute должно быть больше :value.',
    ],
    'gte'                  => [
        'array'   => 'Количество элементов в поле :attribute должно быть :value или больше.',
        'file'    => 'Размер файла, указанный в поле :attribute, должен быть :value Кб или больше.',
        'numeric' => 'Значение поля :attribute должно быть :value или больше.',
        'string'  => 'Количество символов в поле :attribute должно быть :value или больше.',
    ],
    'hex_color'            => 'Значение поля :attribute должно быть корректным цветом в HEX формате.',
    'image'                => 'Файл, указанный в поле :attribute, должен быть изображением.',
    'in'                   => 'Значение поля :attribute отсутствует в списке разрешённых.',
    'in_array'             => 'Значение поля :attribute должно быть указано в поле :other.',
    'integer'              => 'Значение поля :attribute должно быть целым числом.',
    'ip'                   => 'Значение поля :attribute должно быть действительным IP-адресом.',
    'ipv4'                 => 'Значение поля :attribute должно быть действительным IPv4-адресом.',
    'ipv6'                 => 'Значение поля :attribute должно быть действительным IPv6-адресом.',
    'json'                 => 'Значение поля :attribute должно быть JSON строкой.',
    'list'                 => 'Значение поля :attribute должно быть списком.',
    'lowercase'            => 'Значение поля :attribute должно быть в нижнем регистре.',
    'lt'                   => [
        'array'   => 'Количество элементов в поле :attribute должно быть меньше :value.',
        'file'    => 'Размер файла, указанный в поле :attribute, должен быть меньше :value Кб.',
        'numeric' => 'Значение поля :attribute должно быть меньше :value.',
        'string'  => 'Количество символов в поле :attribute должно быть меньше :value.',
    ],
    'lte'                  => [
        'array'   => 'Количество элементов в поле :attribute должно быть :value или меньше.',
        'file'    => 'Размер файла, указанный в поле :attribute, должен быть :value Кб или меньше.',
        'numeric' => 'Значение поля :attribute должно быть равным или меньше :value.',
        'string'  => 'Количество символов в поле :attribute должно быть :value или меньше.',
    ],
    'mac_address'          => 'Значение поля :attribute должно быть корректным MAC-адресом.',
    'max'                  => [
        'array'   => 'Количество элементов в поле :attribute не может превышать :max.',
        'file'    => 'Размер файла в поле :attribute не может быть больше :max Кб.',
        'numeric' => 'Значение поля :attribute не может быть больше :max.',
        'string'  => 'Количество символов в значении поля :attribute не может превышать :max.',
    ],
    'max_digits'           => 'Значение поля :attribute не должно содержать больше :max цифр.',
    'mimes'                => 'Файл, указанный в поле :attribute, должен быть одного из следующих типов: :values.',
    'mimetypes'            => 'Файл, указанный в поле :attribute, должен быть одного из следующих типов: :values.',
    'min'                  => [
        'array'   => 'Количество элементов в поле :attribute должно быть не меньше :min.',
        'file'    => 'Размер файла, указанный в поле :attribute, должен быть не меньше :min Кб.',
        'numeric' => 'Значение поля :attribute должно быть не меньше :min.',
        'string'  => 'Количество символов в поле :attribute должно быть не меньше :min.',
    ],
    'min_digits'           => 'Значение поля :attribute должно содержать не меньше :min цифр.',
    'missing'              => 'Значение поля :attribute должно отсутствовать.',
    'missing_if'           => 'Значение поля :attribute должно отсутствовать, когда :other содержит :value.',
    'missing_unless'       => 'Значение поля :attribute должно отсутствовать, когда :other не содержит :value.',
    'missing_with'         => 'Значение поля :attribute должно отсутствовать, если :values указано.',
    'missing_with_all'     => 'Значение поля :attribute должно отсутствовать, когда указаны все :values.',
    'multiple_of'          => 'Значение поля :attribute должно быть кратным :value',
    'not_in'               => 'Значение поля :attribute находится в списке запрета.',
    'not_regex'            => 'Значение поля :attribute имеет некорректный формат.',
    'numeric'              => 'Значение поля :attribute должно быть числом.',
    'password'             => [
        'letters'       => 'Значение поля :attribute должно содержать хотя бы одну букву.',
        'mixed'         => 'Значение поля :attribute должно содержать хотя бы одну прописную и одну строчную буквы.',
        'numbers'       => 'Значение поля :attribute должно содержать хотя бы одну цифру.',
        'symbols'       => 'Значение поля :attribute должно содержать хотя бы один символ.',
        'uncompromised' => 'Значение поля :attribute обнаружено в утёкших данных. Пожалуйста, выберите другое значение для :attribute.',
    ],
    'present'              => 'Значение поля :attribute должно быть.',
    'present_if'           => 'Значение поля :attribute должно быть когда :other содержит :value.',
    'present_unless'       => 'Значение поля :attribute должно быть, если только :other не содержит :value.',
    'present_with'         => 'Значение поля :attribute должно быть когда одно из :values присутствуют.',
    'present_with_all'     => 'Значение поля :attribute должно быть когда все из значений присутствуют: :values.',
    'prohibited'           => 'Значение поля :attribute запрещено.',
    'prohibited_if'        => 'Значение поля :attribute запрещено, когда :other содержит :value.',
    'prohibited_unless'    => 'Значение поля :attribute запрещено, если :other не состоит в :values.',
    'prohibits'            => 'Значение поля :attribute запрещает присутствие :other.',
    'regex'                => 'Значение поля :attribute имеет некорректный формат.',
    'relatable'            => 'Поле :attribute не может быть связано с этим ресурсом.',
    'required'             => 'Поле :attribute обязательно.',
    'required_array_keys'  => 'Массив, указанный в поле :attribute, обязательно должен иметь ключи: :values',
    'required_if'          => 'Поле :attribute обязательно для заполнения, когда :other содержит :value.',
    'required_if_accepted' => 'Поле :attribute обязательно, когда :other принято.',
    'required_if_declined' => 'Поле :attribute обязательно, когда :other отклонено.',
    'required_unless'      => 'Поле :attribute обязательно для заполнения, когда :other не содержит :values.',
    'required_with'        => 'Поле :attribute обязательно для заполнения, когда :values указано.',
    'required_with_all'    => 'Поле :attribute обязательно для заполнения, когда :values указано.',
    'required_without'     => 'Поле :attribute обязательно для заполнения, когда :values не указано.',
    'required_without_all' => 'Поле :attribute обязательно для заполнения, когда ни одно из :values не указано.',
    'same'                 => 'Значения полей :attribute и :other должны совпадать.',
    'size'                 => [
        'array'   => 'Количество элементов в поле :attribute должно быть равным :size.',
        'file'    => 'Размер файла, указанный в поле :attribute, должен быть равен :size Кб.',
        'numeric' => 'Значение поля :attribute должно быть равным :size.',
        'string'  => 'Количество символов в поле :attribute должно быть равным :size.',
    ],
    'starts_with'          => 'Поле :attribute должно начинаться с одного из следующих значений: :values',
    'string'               => 'Значение поля :attribute должно быть строкой.',
    'timezone'             => 'Значение поля :attribute должно быть действительным часовым поясом.',
    'ulid'                 => 'Значение поля :attribute должно быть корректным ULID.',
    'unique'               => 'Такое значение поля :attribute уже существует.',
    'uploaded'             => 'Загрузка файла из поля :attribute не удалась.',
    'uppercase'            => 'Значение поля :attribute должно быть в верхнем регистре.',
    'url'                  => 'Значение поля :attribute не является ссылкой или имеет некорректный формат.',
    'uuid'                 => 'Значение поля :attribute должно быть корректным UUID.',
    'attributes'           => [
        'address'                  => 'адрес',
        'affiliate_url'            => 'Партнёрская ссылка',
        'age'                      => 'возраст',
        'amount'                   => 'количество',
        'announcement'             => 'анонс',
        'area'                     => 'область',
        'audience_prize'           => 'приз зрительских симпатий',
        'available'                => 'доступно',
        'birthday'                 => 'дата рождения',
        'body'                     => 'контент',
        'city'                     => 'город',
        'compilation'              => 'компиляция',
        'concept'                  => 'концепт',
        'conditions'               => 'условия',
        'content'                  => 'контент',
        'country'                  => 'страна',
        'cover'                    => 'обложка',
        'created_at'               => 'создано в',
        'creator'                  => 'создатель',
        'currency'                 => 'валюта',
        'current_password'         => 'текущий пароль',
        'customer'                 => 'клиент',
        'date'                     => 'дата',
        'date_of_birth'            => 'день рождения',
        'dates'                    => 'даты',
        'day'                      => 'день',
        'deleted_at'               => 'удалено в',
        'description'              => 'описание',
        'display_type'             => 'тип отображения',
        'district'                 => 'округ',
        'duration'                 => 'продолжительность',
        'email'                    => 'email адрес',
        'excerpt'                  => 'выдержка',
        'filter'                   => 'фильтр',
        'finished_at'              => 'завершено в',
        'first_name'               => 'имя',
        'gender'                   => 'пол',
        'grand_prize'              => 'главный приз',
        'group'                    => 'группа',
        'hour'                     => 'час',
        'image'                    => 'изображение',
        'image_desktop'            => 'десктопное изображение',
        'image_main'               => 'основное изображение',
        'image_mobile'             => 'мобильное изображение',
        'images'                   => 'изображения',
        'is_audience_winner'       => 'победитель зрительских симпатий',
        'is_hidden'                => 'скрыто',
        'is_subscribed'            => 'подписан',
        'is_visible'               => 'отображается',
        'is_winner'                => 'победитель',
        'items'                    => 'элементы',
        'key'                      => 'ключ',
        'last_name'                => 'фамилия',
        'lesson'                   => 'урок',
        'line_address_1'           => 'строка адреса 1',
        'line_address_2'           => 'строка адреса 2',
        'login'                    => 'логин',
        'message'                  => 'сообщение',
        'middle_name'              => 'отчество',
        'minute'                   => 'минута',
        'mobile'                   => 'моб. номер',
        'month'                    => 'месяц',
        'name'                     => 'имя',
        'national_code'            => 'национальный код',
        'number'                   => 'номер',
        'password'                 => 'пароль',
        'password_confirmation'    => 'подтверждение пароля',
        'phone'                    => 'номер телефона',
        'photo'                    => 'фотография',
        'portfolio'                => 'портфолио',
        'postal_code'              => 'индекс',
        'preview'                  => 'предпросмотр',
        'price'                    => 'стоимость',
        'product_id'               => 'ID продукта',
        'product_uid'              => 'UID продукта',
        'product_uuid'             => 'UUID продукта',
        'promo_code'               => 'промокод',
        'province'                 => 'провинция',
        'quantity'                 => 'количество',
        'reason'                   => 'причина',
        'recaptcha_response_field' => 'ошибка капчи',
        'referee'                  => 'жюри',
        'referees'                 => 'жюри',
        'reject_reason'            => 'причина отказа',
        'remember'                 => 'запомнить',
        'restored_at'              => 'восстановлено в',
        'result_text_under_image'  => 'текст под изображением',
        'role'                     => 'роль',
        'rule'                     => 'правило',
        'rules'                    => 'правила',
        'second'                   => 'секунда',
        'sex'                      => 'пол',
        'shipment'                 => 'доставка',
        'short_text'               => 'короткое описание',
        'size'                     => 'размер',
        'skills'                   => 'навыки',
        'slug'                     => 'слаг',
        'specialization'           => 'специализация',
        'started_at'               => 'началось в',
        'state'                    => 'штат',
        'status'                   => 'статус',
        'street'                   => 'улица',
        'student'                  => 'студент',
        'subject'                  => 'заголовок',
        'tag'                      => 'тег',
        'tags'                     => 'теги',
        'teacher'                  => 'учитель',
        'terms'                    => 'правила',
        'test_description'         => 'тестовое описание',
        'test_locale'              => 'тестовая локализация',
        'test_name'                => 'тестовое имя',
        'text'                     => 'текст',
        'time'                     => 'время',
        'title'                    => 'наименование',
        'type'                     => 'тип',
        'updated_at'               => 'обновлено в',
        'user'                     => 'пользователь',
        'username'                 => 'никнейм',
        'value'                    => 'значение',
        'year'                     => 'год',
    ],
];


================================================
FILE: resources/lang/ru.json
================================================
{
    "(and :count more error)": "(и ещё :count ошибка)",
    "(and :count more errors)": "(и ещё :count ошибка)|(и ещё :count ошибки)|(и ещё :count ошибок)",
    "A new verification link has been sent to the email address you provided in your profile settings.": "На адрес электронной почты, который Вы указали в настройках своего профиля, была отправлена новая ссылка для подтверждения.",
    "A new verification link has been sent to your email address.": "На Ваш адрес электронной почты отправлена новая ссылка для подтверждения.",
    "A Timeout Occurred": "Истекло время ожидания",
    "Accept": "Принять",
    "Accept Invitation": "Принять приглашение",
    "Accepted": "Принято",
    "Action": "Действие",
    "Actions": "Действия",
    "Add": "Добавить",
    "Add :name": "Добавить :name",
    "Add a new team member to your team, allowing them to collaborate with you.": "Добавьте нового члена в свою команду для совместной работы с ним.",
    "Add additional security to your account using two factor authentication.": "Защитите свой аккаунт используя двухфакторную аутентификацию.",
    "Add Team Member": "Добавить члена команды",
    "Added.": "Добавлено.",
    "Admin": "Панель администратора",
    "Administrator": "Администратор",
    "Administrator users can perform any action.": "Администратор может выполнять любые действия.",
    "Agree": "Согласен(на)",
    "All of the people that are part of this team.": "Все люди, являющиеся частью этой команды",
    "All rights reserved.": "Все права защищены.",
    "Already registered?": "Уже зарегистрированы?",
    "Already Reported": "Уже сообщалось",
    "API Token": "API токен",
    "API Token Permissions": "Разрешения API токена",
    "API Tokens": "API токены",
    "API tokens allow third-party services to authenticate with our application on your behalf.": "API токены позволяют сторонним службам аутентифицироваться в приложении от Вашего имени.",
    "Archive": "Архив",
    "Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.": "Вы уверены что хотите удалить эту команду? После удаления команды все её ресурсы и данные будут удалены без возможности восстановления.",
    "Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.": "Вы уверены что хотите удалить свою учётную запись? После удаления Вашей учётной записи все её ресурсы и данные будут удалены без возможности восстановления. Пожалуйста, введите свой пароль для подтверждения удаления учётной записи.",
    "Are you sure you would like to delete this API token?": "Вы уверены что хотите удалить этот API токен?",
    "Are you sure you would like to leave this team?": "Вы уверены что хотите покинуть эту команду?",
    "Are you sure you would like to remove this person from the team?": "Вы уверены что хотите удалить этого члена команды?",
    "Assign": "Назначить",
    "Associate": "Ассоциировать",
    "Attach": "Прикрепить",
    "Bad Gateway": "Проблема с шлюзом",
    "Bad Request": "Некорректный запрос",
    "Bandwidth Limit Exceeded": "Превышена нагрузка на канал связи",
    "Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.": "Прежде чем продолжить, не могли бы Вы подтвердить свой адрес электронной почты, перейдя по ссылке, которую мы только что отправили Вам по электронной почте? Если Вы не получили письмо, мы с радостью вышлем другое.",
    "Browse": "Просмотр",
    "Browser Sessions": "Сеансы",
    "Cancel": "Отмена",
    "Choose": "Выбрать",
    "Choose :name": "Выбрать :name",
    "Choose File": "Выбрать файл",
    "Choose Image": "Выбрать изображение",
    "Click here to re-send the verification email.": "Нажмите здесь, чтобы повторно отправить электронное письмо для подтверждения.",
    "Click to copy": "Скопировать",
    "Client Closed Request": "Запрос закрыт клиентом",
    "Close": "Закрыть",
    "Code": "Код",
    "Collapse": "Свернуть",
    "Collapse All": "Свернуть всё",
    "Comment": "Комментарий",
    "Confirm": "Подтвердить",
    "Confirm Password": "Подтвердить пароль",
    "Conflict": "Конфликт",
    "Connect": "Подключить",
    "Connection Closed Without Response": "Соединение закрыто без ответа",
    "Connection Timed Out": "Соединение не отвечает",
    "Continue": "Продолжить",
    "Create": "Создать",
    "Create :name": "Создать :name",
    "Create a new team to collaborate with others on projects.": "Создайте новую команду для совместной работы над проектами.",
    "Create Account": "Создать аккаунт",
    "Create API Token": "Создать API токен",
    "Create New Team": "Создать команду",
    "Create Team": "Создать команду",
    "Created": "Создано",
    "Created.": "Создано.",
    "Current Password": "Текущий пароль",
    "Dashboard": "Панель",
    "Delete": "Удалить",
    "Delete :name": "Удалить :name",
    "Delete Account": "Удалить аккаунт",
    "Delete API Token": "Удалить API токен",
    "Delete Team": "Удалить команду",
    "Detach": "Открепить",
    "Details": "Подробности",
    "Disable": "Отключить",
    "Discard": "Отказаться",
    "Done": "Готово",
    "Done.": "Успешно.",
    "Down": "Вниз",
    "Duplicate": "Дублировать",
    "Duplicate :name": "Дублировать :name",
    "Edit": "Редактировать",
    "Edit :name": "Редактировать :name",
    "Edit Profile": "Редактировать профиль",
    "Editor": "Редактор",
    "Editor users have the ability to read, create, and update.": "Пользователи с правами редактора могут читать, создавать и обновлять.",
    "Email": "Адрес электронной почты",
    "Email Password Reset Link": "Ссылка для сброса пароля",
    "Enable": "Включить",
    "Ensure your account is using a long, random password to stay secure.": "В целях безопасности убедитесь, что Вы используете длинный случайный пароль.",
    "errors": "ошибки",
    "Expand": "Раскрыть",
    "Expand All": "Раскрыть всё",
    "Expectation Failed": "Истекло время ожидания",
    "Explanation": "Объяснить",
    "Export": "Экспорт",
    "Export :name": "Экспортировать :name",
    "Failed Dependency": "Ошибка зависимости",
    "File": "Файл",
    "Files": "Файлы",
    "Finish enabling two factor authentication.": "Завершите активацию двухфакторной аутентификации.",
    "For your security, please confirm your password to continue.": "Для продолжения подтвердите пароль для Вашей безопасности.",
    "Forbidden": "Запрещено",
    "Forgot your password?": "Забыли пароль?",
    "Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.": "Забыли пароль? Нет проблем. Просто сообщите Ваш адрес электронной почты и мы пришлём Вам ссылку для сброса пароля.",
    "Found": "Найдено",
    "Gateway Timeout": "Шлюз не отвечает",
    "Go Home": "Домой",
    "Go to page :page": "Перейти к :page-й странице",
    "Gone": "Удалено",
    "Great! You have accepted the invitation to join the :team team.": "Отлично! Вы приняли приглашение присоединиться к команде :team.",
    "Hello!": "Здравствуйте!",
    "Hide": "Скрыть",
    "Hide :name": "Скрыть :name",
    "Home": "На главную",
    "HTTP Version Not Supported": "Версия HTTP не поддерживается",
    "I agree to the :terms_of_service and :privacy_policy": "Я соглашаюсь с :terms_of_service и :privacy_policy",
    "I'm a teapot": "Я - чайник",
    "If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.": "При необходимости, Вы можете выйти из всех других сеансов на всех Ваших устройствах. Некоторые из Ваших сеансов перечислены ниже, однако, этот список может быть не полным. Если Вы считаете, что Ваша учётная запись была взломана, Вам также следует обновить свой пароль.",
    "If you already have an account, you may accept this invitation by clicking the button below:": "Если у Вас уже есть учётная запись, Вы можете принять это приглашение, нажав на кнопку:",
    "If you did not create an account, no further action is required.": "Если Вы не создавали учетную запись, никаких дополнительных действий не требуется.",
    "If you did not expect to receive an invitation to this team, you may discard this email.": "Если Вы не желаете войти в состав этой команды, Вы можете проигнорировать это письмо.",
    "If you did not request a password reset, no further action is required.": "Если Вы не запрашивали восстановление пароля, никаких дополнительных действий не требуется.",
    "If you do not have an account, you may create one by clicking the button below. After creating an account, you may click the invitation acceptance button in this email to accept the team invitation:": "Если у Вас нет учётной записи, Вы можете создать её, нажав на кнопку ниже. После создания учётной записи, Вы можете нажать кнопку принятия приглашения в этом письме, чтобы принять его:",
    "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "Если у Вас возникли проблемы с нажатием кнопки \":actionText\", скопируйте и вставьте приведенный ниже URL-адрес в свой браузер:",
    "IM Used": "Использовано IM",
    "Image": "Изображение",
    "Impersonate": "Войти под пользователем",
    "Impersonation": "Войти под пользователем",
    "Import": "Импорт",
    "Import :name": "Импорт :name",
    "Insufficient Storage": "Переполнение хранилища",
    "Internal Server Error": "Внутренняя ошибка",
    "Introduction": "Введение",
    "Invalid JSON was returned from the route.": "Маршрут вернул некорректный JSON.",
    "Invalid SSL Certificate": "Недействительный SSL сертификат",
    "Last active": "Последняя активность",
    "Last used": "Последнее использование",
    "Leave": "Покинуть",
    "Leave Team": "Покинуть команду",
    "length": "длина",
    "Length Required": "Необходима длина",
    "Like": "Нравится",
    "Load": "Загрузить",
    "Localize": "Локализовать",
    "Location": "Местоположение",
    "Locked": "Доступ заблокирован",
    "Log In": "Войти",
    "Log in": "Войти",
    "Log Out": "Выйти",
    "Log Out Other Browser Sessions": "Завершить другие сессии",
    "Login": "Войти",
    "Logout": "Выйти",
    "Loop Detected": "Обнаружен бесконечный цикл",
    "Maintenance Mode": "Ведутся технические работы",
    "Manage Account": "Управление аккаунтом",
    "Manage and log out your active sessions on other browsers and devices.": "Управление активными сеансами на других устройствах.",
    "Manage API Tokens": "Управление API токенами",
    "Manage Role": "Управление ролью",
    "Manage Team": "Управление командой",
    "Method Not Allowed": "Метод запрещён",
    "Misdirected Request": "Неверный запрос",
    "Moved Permanently": "Перемещено навсегда",
    "Multi-Status": "Много статусов",
    "Multiple Choices": "Много вариантов",
    "Name": "Имя",
    "Network Authentication Required": "Требуется сетевая аутентификация",
    "Network Connect Timeout Error": "Истекло время подключения",
    "Network Read Timeout Error": "Истекло время ожидания",
    "New": "Новый",
    "New :name": "Новый :name",
    "New Password": "Новый пароль",
    "No": "Нет",
    "No Content": "Содержимое отсутствует",
    "Non-Authoritative Information": "Информация не авторитетна",
    "Not Acceptable": "Неприемлемо",
    "Not Extended": "Не расширено",
    "Not Found": "Не найдено",
    "Not Implemented": "Не реализовано",
    "Not Modified": "Не изменялось",
    "of": "из",
    "OK": "ОК",
    "Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.": "После удаления команды все её ресурсы и данные будут удалены без возможности восстановления. Перед удалением скачайте данные и информацию о команде, которые хотите сохранить.",
    "Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.": "После удаления Вашей учётной записи все её ресурсы и данные будут удалены без возможности восстановления. Перед удалением учётной записи загрузите данные и информацию, которую хотите сохранить.",
    "Open": "Открыть",
    "Open in a current window": "Открыть в текущем окне",
    "Open in a new window": "Открыть в новом окне",
    "Open in a parent frame": "Открыть в родительском фрейме",
    "Open in the topmost frame": "Открыть в главном фрейме",
    "Open on the website": "Открыть на сайте",
    "Origin Is Unreachable": "Источник недоступен",
    "Page Expired": "Страница устарела",
    "Pagination Navigation": "Навигация",
    "Partial Content": "Не полное содержимое",
    "Password": "Пароль",
    "Payload Too Large": "Большой объём данных",
    "Payment Required": "Требуется оплата",
    "Pending Team Invitations": "Ожидающие приглашения в команду",
    "Permanent Redirect": "Постоянное перенаправление",
    "Permanently delete this team.": "Удалить эту команду навсегда.",
    "Permanently delete your account.": "Удалить свой аккаунт навсегда.",
    "Permissions": "Разрешения",
    "Photo": "Фото",
    "Please click the button below to verify your email address.": "Пожалуйста, нажмите кнопку ниже, чтобы подтвердить свой адрес электронной почты.",
    "Please confirm access to your account by entering one of your emergency recovery codes.": "Подтвердите доступ к своей учётной записи, введя один из кодов аварийного восстановления.",
    "Please confirm access to your account by entering the authentication code provided by your authenticator application.": "Подтвердите доступ к своей учётной записи, введя код из Вашего приложения аутентификации.",
    "Please copy your new API token. For your security, it won't be shown again.": "Скопируйте Ваш новый API токен. В целях безопасности он больше не будет отображаться.",
    "Please enter your password to confirm you would like to log out of your other browser sessions across all of your devices.": "Введите пароль для подтверждения выхода из других сеансов на всех ваших устройствах.",
    "Please provide the email address of the person you would like to add to this team.": "Укажите электронный адрес человека, которого Вы хотите добавить в эту команду.",
    "Precondition Failed": "Условие ложно",
    "Precondition Required": "Требуется предусловие",
    "Preview": "Предпросмотр",
    "Price": "Цена",
    "Privacy Policy": "политикой конфиденциальности",
    "Processing": "Идет обработка",
    "Profile": "Профиль",
    "Profile Information": "Информация профиля",
    "Proxy Authentication Required": "Требуется аутентификация прокси",
    "Railgun Error": "Ошибка соединения с Railgun",
    "Range Not Satisfiable": "Диапазон недостижим",
    "Record": "Запись",
    "Recovery Code": "Код восстановления",
    "Regards": "С уважением",
    "Regenerate Recovery Codes": "Перегенерировать коды восстановления",
    "Register": "Регистрация",
    "Remember me": "Запомнить меня",
    "Remove": "Удалить",
    "Remove Photo": "Удалить фото",
    "Remove Team Member": "Удалить члена команды",
    "Request Header Fields Too Large": "Поля заголовка слишком большие",
    "Request Timeout": "Истекло время ожидания",
    "Resend Verification Email": "Выслать повторно письмо для подтверждения",
    "Reset Content": "Сброс содержимого",
    "Reset Password": "Сбросить пароль",
    "Reset Password Notification": "Оповещение о сбросе пароля",
    "Restore": "Восстановить",
    "Restore :name": "Восстановить :name",
    "results": "результатов",
    "Retry With": "Повторить с",
    "Role": "Роль",
    "Save": "Сохранить",
    "Save & Close": "Сохранить и закрыть",
    "Save & Return": "Сохранить и вернуться",
    "Save :name": "Сохранить :name",
    "Saved.": "Сохранено.",
    "Search": "Поиск",
    "Search :name": "Поиск :name",
    "See Other": "Смотри другое",
    "Select": "Выбрать",
    "Select A New Photo": "Выбрать фото",
    "Select All": "Выбрать всё",
    "Send": "Отправить",
    "Server Error": "Ошибка сервера",
    "Service Unavailable": "Сервис недоступен",
    "Session Has Expired": "Сессия устарела",
    "Settings": "Настройки",
    "Setup Key": "Ключ настройки",
    "Show": "Показать",
    "Show :name": "Показать :name",
    "Show All": "Показать всё",
    "Show Recovery Codes": "Показать коды восстановления",
    "Showing": "Показано с",
    "Sign In": "Регистрация",
    "Solve": "Решить",
    "SSL Handshake Failed": "Квитирование SSL не удалось",
    "Start": "Начать",
    "Stop": "Остановить",
    "Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.": "Храните эти коды восстановления в безопасном месте. Их можно использовать для восстановления доступа к Вашей учётной записи, если Ваше устройство с двухфакторной аутентификацией потеряно.",
    "Submit": "Отправить",
    "Subscribe": "Подписаться",
    "Switch": "Переключить",
    "Switch Teams": "Сменить команды",
    "Switch To Role": "Переключиться на роль",
    "Switching Protocols": "Переключение протоколов",
    "Tag": "Тег",
    "Tags": "Теги",
    "Team Details": "Детали команды",
    "Team Invitation": "Приглашение в команду",
    "Team Members": "Члены команды",
    "Team Name": "Название команды",
    "Team Owner": "Владелец команды",
    "Team Settings": "Настройки команды",
    "Temporary Redirect": "Временное перенаправление",
    "Terms of Service": "Условия обслуживания",
    "The :attribute must be a valid role.": "Значение поля :attribute должно быть корректной ролью.",
    "The :attribute must be at least :length characters and contain at least one number.": "Значение поля :attribute должно быть не меньше :length символов и содержать как минимум одну цифру.",
    "The :attribute must be at least :length characters and contain at least one special character and one number.": "Значение поля :attribute должно быть не меньше :length символов, содержать как минимум один спецсимвол и одну цифру.",
    "The :attribute must be at least :length characters and contain at least one special character.": "Значение поля :attribute должно быть не меньше :length символов и содержать как минимум один спецсимвол.",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one number.": "Значение поля :attribute должно быть не меньше :length символов и содержать как минимум один символ в верхнем регистре и одну цифру.",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one special character.": "Значение поля :attribute должно быть не меньше :length символов и содержать как минимум один символ в верхнем регистре и один спецсимвол.",
    "The :attribute must be at least :length characters and contain at least one uppercase character, one number, and one special character.": "Значение поля :attribute должно быть не меньше :length символов и содержать как минимум один символ в верхнем регистре, одно число и один спецсимвол.",
    "The :attribute must be at least :length characters and contain at least one uppercase character.": "Значение поля :attribute должно быть не меньше :length символов и содержать как минимум один символ в верхнем регистре.",
    "The :attribute must be at least :length characters.": "Значение поля :attribute должно быть не меньше :length символов.",
    "The given data was invalid.": "Указанные данные недействительны.",
    "The password is incorrect.": "Некорректный пароль.",
    "The provided password does not match your current password.": "Указанный пароль не соответствует Вашему текущему паролю.",
    "The provided password was incorrect.": "Неверный пароль.",
    "The provided two factor authentication code was invalid.": "Неверный код двухфакторной аутентификации.",
    "The provided two factor recovery code was invalid.": "Предоставленный двухфакторный код восстановления недействителен.",
    "The response is not a streamed response.": "Ответ не является потоковым.",
    "The response is not a view.": "Ответ не является представлением.",
    "The team's name and owner information.": "Название команды и информация о её владельце.",
    "These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.": "Эти люди были приглашены в Вашу команду и получили электронное письмо с приглашением. Они могут присоединиться к команде, приняв приглашение.",
    "This action is unauthorized.": "Действие не авторизовано.",
    "This device": "Это устройство",
    "This is a secure area of the application. Please confirm your password before continuing.": "Это защищённая область приложения. Пожалуйста, подтвердите Ваш пароль, прежде чем продолжить.",
    "This password does not match our records.": "Пароль не соответствует.",
    "This password reset link will expire in :count minutes.": "Срок действия ссылки для сброса пароля истекает через :count минут.",
    "This user already belongs to the team.": "Пользователь уже входит в команду.",
    "This user has already been invited to the team.": "Этот пользователь уже был приглашён в команду.",
    "to": "по",
    "To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.": "Для завершения активации двухфакторной аутентификации, отсканируйте следующий QR-код с помощью приложения аутентификации на телефоне или введите ключ настройки вручную и предоставьте сгенерированный OTP-код.",
    "Toggle navigation": "Переключить навигацию",
    "Token Name": "Имя токена",
    "Too Early": "Слишком рано",
    "Too Many Requests": "Слишком много запросов",
    "Translate": "Перевод",
    "Translate It": "Перевести",
    "Two Factor Authentication": "Двухфакторная аутентификация",
    "Two factor authentication is now enabled. Scan the following QR code using your phone's authenticator application or enter the setup key.": "Двухфакторная аутентификация успешно активирована. Отсканируйте следующий QR-код при помощи приложения аутентификации на Вашем телефоне для проверки подлинности или введите ключ настройки.",
    "Unauthorized": "Не авторизован",
    "Unavailable For Legal Reasons": "Недоступно по юридическим причинам",
    "Unknown": "Неизвестно",
    "Unknown Error": "Неизвестная ошибка",
    "Unpack": "Распаковать",
    "Unprocessable Entity": "Необрабатываемый экземпляр",
    "Unsubscribe": "Отписаться",
    "Unsupported Media Type": "Неподдерживаемый тип данных",
    "Up": "Вверх",
    "Update": "Обновить",
    "Update :name": "Обновить :name",
    "Update Password": "Обновить пароль",
    "Update your account's profile information and email address.": "Обновите информацию и адрес электронной почты в профиле учётной записи.",
    "Upgrade Required": "Требуется обновление",
    "URI Too Long": "URI слишком длинный",
    "Use a recovery code": "Использовать код восстановления",
    "Use an authentication code": "Использовать код аутентификации",
    "Use Proxy": "Используй прокси",
    "User": "Пользователь",
    "Variant Also Negotiates": "Вариант тоже проводит согласование",
    "Verify Email Address": "Подтвердить адрес электронной почты",
    "View": "Просмотр",
    "View :name": "Посмотреть :name",
    "We were unable to find a registered user with this email address.": "Нам не удалось найти зарегистрированного пользователя с этим адресом электронной почты.",
    "Web Server is Down": "Веб-сервер не работает",
    "When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.": "Если двухфакторная аутентификация включена, Вам будет предложено ввести случайный токен безопасности во время аутентификации. Вы можете получить этот токен в приложении Google Authenticator Вашего телефона.",
    "Whoops!": "Упс!",
    "Whoops! Something went wrong.": "Упс! Что-то пошло не так.",
    "Yes": "Да",
    "You are receiving this email because we received a password reset request for your account.": "Вы получили это письмо, потому что мы получили запрос на сброс пароля для Вашей учётной записи.",
    "You have been invited to join the :team team!": "Вас пригласили присоединиться к команде :team.",
    "You have enabled two factor authentication.": "Вы включили двухфакторную аутентификацию.",
    "You have not enabled two factor authentication.": "Вы не включили двухфакторную аутентификацию.",
    "You may accept this invitation by clicking the button below:": "Вы можете принять это приглашение, нажав кнопку ниже:",
    "You may delete any of your existing tokens if they are no longer needed.": "Вы можете удалить любой из имеющихся у Вас токенов, если они больше не нужны.",
    "You may not delete your personal team.": "Вы не можете удалить свою команду.",
    "You may not leave a team that you created.": "Вы не можете покидать созданную Вами команду.",
    "Your email address is unverified.": "Ваш адрес электронной почты не подтверждён."
}

================================================
FILE: resources/lang/tr/actions.php
================================================
<?php

declare(strict_types=1);

return [
    'accept'          => 'Kabul etmek',
    'action'          => 'Aksiyon',
    'actions'         => 'Hareketler',
    'add'             => 'Eklemek',
    'admin'           => 'Yönetici',
    'agree'           => 'Kabul etmek',
    'archive'         => 'Arşiv',
    'assign'          => 'Atamak',
    'associate'       => 'İş arkadaşı',
    'attach'          => 'Eklemek',
    'browse'          => 'Araştır',
    'cancel'          => 'İptal etmek',
    'choose'          => 'Seçmek',
    'choose_file'     => 'Dosya seçin',
    'choose_image'    => 'Resim Seç',
    'click_to_copy'   => 'Kopyalamak için tıklayın',
    'close'           => 'Kapalı',
    'collapse'        => 'Yıkılmak',
    'collapse_all'    => 'Hepsini Daralt',
    'comment'         => 'Yorum',
    'confirm'         => 'Onaylamak',
    'connect'         => 'Bağlamak',
    'create'          => 'Yaratmak',
    'delete'          => 'Silmek',
    'detach'          => 'Ayır',
    'details'         => 'Detaylar',
    'disable'         => 'Devre dışı bırakmak',
    'discard'         => 'At',
    'done'            => 'Tamamlamak',
    'down'            => 'Aşağı',
    'duplicate'       => 'Kopyalamak',
    'edit'            => 'Düzenlemek',
    'enable'          => 'Olanak vermek',
    'expand'          => 'Genişletmek',
    'expand_all'      => 'Hepsini genişlet',
    'explanation'     => 'Açıklama',
    'export'          => 'İhracat',
    'file'            => 'Dosya',
    'files'           => 'Dosyalar',
    'go_home'         => 'Eve git',
    'hide'            => 'Saklamak',
    'home'            => 'Ev',
    'image'           => 'Resim',
    'impersonate'     => 'Başkasının kimliğine bürün',
    'impersonation'   => 'Kimliğe bürünme',
    'import'          => 'İçe aktarmak',
    'introduction'    => 'giriiş',
    'like'            => 'Beğenmek',
    'load'            => 'Yük',
    'localize'        => 'Yerelleştir',
    'log_in'          => 'Giriş yapmak',
    'log_out'         => 'Çıkış Yap',
    'named'           => [
        'add'       => ':name ekle',
        'choose'    => ':name\'u seçin',
        'create'    => ':name oluştur',
        'delete'    => ':name\'u sil',
        'duplicate' => 'Çoğalt: ad',
        'edit'      => ':name\'u düzenle',
        'export'    => 'Export :name',
        'hide'      => ':name\'u gizle',
        'import'    => 'İthalat :name',
        'new'       => 'Yeni :name',
        'restore'   => ':name\'u geri yükle',
        'save'      => ':name\'u kaydet',
        'search'    => 'Ara :name',
        'show'      => ':name\'u göster',
        'update'    => 'Güncelleme :name',
        'view'      => ':name\'u görüntüle',
    ],
    'new'             => 'Yeni',
    'no'              => 'HAYIR',
    'open'            => 'Açık',
    'open_website'    => 'Web sitesinde aç',
    'preview'         => 'Ön izleme',
    'price'           => 'Fiyat',
    'record'          => 'Kayıt',
    'restore'         => 'Eski haline getirmek',
    'save'            => 'Kaydetmek',
    'save_and_close'  => 'Kaydet kapat',
    'save_and_return' => 'Kaydet ve Geri Dön',
    'search'          => 'Aramak',
    'select'          => 'Seçme',
    'select_all'      => 'Hepsini seç',
    'send'            => 'Göndermek',
    'settings'        => 'Ayarlar',
    'show'            => 'Göstermek',
    'show_all'        => 'Hepsini Göster ↓',
    'sign_in'         => 'Kayıt olmak',
    'solve'           => 'Çözmek',
    'start'           => 'Başlangıç',
    'stop'            => 'Durmak',
    'submit'          => 'Göndermek',
    'subscribe'       => 'Abone',
    'switch'          => 'Anahtar',
    'switch_to_role'  => 'Role Geç',
    'tag'             => 'Etiket',
    'tags'            => 'Etiketler',
    'target_link'     => [
        'blank'  => 'Yeni bir pencerede aç',
        'parent' => 'Bir üst çerçevede aç',
        'self'   => 'Geçerli pencerede aç',
        'top'    => 'En üst çerçevede aç',
    ],
    'translate'       => 'Çevirmek',
    'translate_it'    => 'Çevir',
    'unpack'          => 'Paketi aç',
    'unsubscribe'     => 'Abonelikten çık',
    'up'              => 'Yukarı',
    'update'          => 'Güncelleme',
    'user'            => 'Kullanıcı',
    'view'            => 'Görüş',
    'yes'             => 'Evet',
];


================================================
FILE: resources/lang/tr/auth.php
================================================
<?php

declare(strict_types=1);

return [
    'failed'   => 'Bu kimlik bilgileri kayıtlarımızla eşleşmiyor.',
    'password' => 'Parola geçersiz.',
    'throttle' => 'Çok fazla giriş denemesi. :seconds saniye sonra lütfen tekrar deneyin.',
];


================================================
FILE: resources/lang/tr/http-statuses.php
================================================
<?php

declare(strict_types=1);

return [
    '0'            => 'Bilinmeyen Hata',
    '100'          => 'Devam Et',
    '101'          => 'Protokoller Değiştiriliyor',
    '102'          => 'İşleniyor',
    '200'          => 'Tamam',
    '201'          => 'Oluşturuldu',
    '202'          => 'Kabul Edilmiş',
    '203'          => 'Yetkili Olmayan Bilgiler',
    '204'          => 'İçerik Yok',
    '205'          => 'İçeriği Sıfırla',
    '206'          => 'Kısmi İçerik',
    '207'          => 'Çoklu Durum',
    '208'          => 'Zaten Bildirildi',
    '226'          => 'IM Kullanıldı',
    '300'          => 'Çoklu Seçimler',
    '301'          => 'Kalıcı Olarak Taşındı',
    '302'          => 'Bulundu',
    '303'          => 'Diğerlerini Gör',
    '304'          => 'Değiştirilmedi',
    '305'          => 'Proxy Kullan',
    '307'          => 'Geçici Yönlendirme',
    '308'          => 'Kalıcı Yönlendirme',
    '400'          => 'Geçersiz istek',
    '401'          => 'Yetkisiz',
    '402'          => 'Ödeme gerekli',
    '403'          => 'Yasaklı',
    '404'          => 'Sayfa bulunamadı',
    '405'          => 'İzin Verilmeyen Yöntem',
    '406'          => 'Kabul Edilemez',
    '407'          => 'Proxy Kimlik Doğrulaması Gerekli',
    '408'          => 'İstek zaman aşımına uğradı',
    '409'          => 'Çakışma',
    '410'          => 'Gitmiş',
    '411'          => 'Uzunluk Gerekli',
    '412'          => 'Ön Koşul Başarısız',
    '413'          => 'Veri Çok Büyük',
    '414'          => 'URI Çok Uzun',
    '415'          => 'Desteklenmeyen Medya Türü',
    '416'          => 'Aralık Yetersiz',
    '417'          => 'Beklenti Başarısız',
    '418'          => 'Ben bir demliğim',
    '419'          => 'Oturum süresi doldu',
    '421'          => 'Yanlış Yönlendirilmiş İstek',
    '422'          => 'İşlenemeyen Varlık',
    '423'          => 'Kilitli',
    '424'          => 'Başarısız Bağımlılık',
    '425'          => 'Çok erken',
    '426'          => 'Yükseltme Gerekli',
    '428'          => 'Ön Koşul Gerekli',
    '429'          => 'Çok Fazla İstek',
    '431'          => 'İstek Başlık Alanları Çok Büyük',
    '444'          => 'Bağlantı Yanıtsız Kapatıldı',
    '449'          => 'İle Yeniden Dene',
    '451'          => 'Yasal Sebepler Nedeniyle Kullanılamıyor',
    '499'          => 'İstemci Kapandı İsteği',
    '500'          => 'İç Sunucu Hatası',
    '501'          => 'Uygulanmadı',
    '502'          => 'Geçersiz Ağ Geçidi',
    '503'          => 'Bakım Modu',
    '504'          => 'Ağ Geçidi Zaman Aşımı',
    '505'          => 'HTTP Sürümü Desteklenmiyor',
    '506'          => 'Varyant Ayrıca Müzakere Ediyor',
    '507'          => 'Yetersiz depolama',
    '508'          => 'Döngü Tespit Edildi',
    '509'          => 'Bant Genişliği Sınırı Aşıldı',
    '510'          => 'Genişletilmemiş',
    '511'          => 'Ağ Kimlik Doğrulaması Gerekli',
    '520'          => 'Bilinmeyen Hata',
    '521'          => 'Web Sunucusu Çalışmıyor',
    '522'          => 'Bağlantı Zaman Aşımına Uğradı',
    '523'          => 'Kökeni Ulaşılamaz',
    '524'          => 'Bir Zaman Aşımı Oluştu',
    '525'          => 'SSL El Sıkışma Başarısız',
    '526'          => 'Geçersiz SSL Sertifikası',
    '527'          => 'Railgun Hatası',
    '598'          => 'Ağ Okuma Zaman Aşımı Hatası',
    '599'          => 'Ağ Bağlantısı Zaman Aşımı Hatası',
    'unknownError' => 'Bilinmeyen Hata',
];


================================================
FILE: resources/lang/tr/pagination.php
================================================
<?php

declare(strict_types=1);

return [
    'next'     => 'Sonrakiler &raquo;',
    'previous' => '&laquo; Öncekiler',
];


================================================
FILE: resources/lang/tr/passwords.php
================================================
<?php

declare(strict_types=1);

return [
    'reset'     => 'Parolanız sıfırlandı!',
    'sent'      => 'Parola sıfırlama bağlantınız e-posta ile gönderildi!',
    'throttled' => 'Tekrar denemeden önce lütfen bekleyin.',
    'token'     => 'Parola sıfırlama kodu geçersiz.',
    'user'      => 'Bu e-posta adresi ile kayıtlı bir üye bulunamadı.',
];


================================================
FILE: resources/lang/tr/validation.php
================================================
<?php

declare(strict_types=1);

return [
    'accepted'             => ':Attribute kabul edilmelidir.',
    'accepted_if'          => ':Attribute, :other değeri :value ise kabul edilmelidir.',
    'active_url'           => ':Attribute geçerli bir URL olmalıdır.',
    'after'                => ':Attribute mutlaka :date tarihinden sonra olmalıdır.',
    'after_or_equal'       => ':Attribute mutlaka :date tarihinden sonra veya aynı tarihte olmalıdır.',
    'alpha'                => ':Attribute sadece harflerden oluşmalıdır.',
    'alpha_dash'           => ':Attribute sadece harflerden, rakamlardan ve tirelerden oluşmalıdır.',
    'alpha_num'            => ':Attribute sadece harflerden ve rakamlardan oluşmalıdır.',
    'array'                => ':Attribute mutlaka bir dizi olmalıdır.',
    'ascii'                => ':Attribute yalnızca tek baytlık alfasayısal karakterler ve semboller içermelidir.',
    'attached'             => 'Bu :attribute zaten tanımlı.',
    'before'               => ':Attribute mutlaka :date tarihinden önce olmalıdır.',
    'before_or_equal'      => ':Attribute mutlaka :date tarihinden önce veya aynı tarihte olmalıdır.',
    'between'              => [
        'array'   => ':Attribute mutlaka :min - :max arasında öge içermelidir.',
        'file'    => ':Attribute mutlaka :min - :max kilobayt arasında olmalıdır.',
        'numeric' => ':Attribute mutlaka :min - :max arasında olmalıdır.',
        'string'  => ':Attribute mutlaka :min - :max karakter arasında olmalıdır.',
    ],
    'boolean'              => ':Attribute sadece doğru veya yanlış olmalıdır.',
    'can'                  => ':Attribute alanı yetkisiz bir değer içeriyor.',
    'confirmed'            => ':Attribute tekrarı eşleşmiyor.',
    'contains'             => ':attribute alanında gerekli bir değer eksik.',
    'current_password'     => 'Parola hatalı.',
    'date'                 => ':Attribute geçerli bir tarih değil.',
    'date_equals'          => ':Attribute mutlaka :date ile aynı tarihte olmalıdır.',
    'date_format'          => ':Attribute mutlaka :format biçiminde olmalıdır.',
    'decimal'              => ':Attribute, :decimal ondalık basamaklara sahip olmalıdır.',
    'declined'             => ':Attribute kabul edilmemektedir.',
    'declined_if'          => ':Attribute, :other değeri :value iken kabul edilmemektedir.',
    'different'            => ':Attribute ile :other mutlaka birbirinden farklı olmalıdır.',
    'digits'               => ':Attribute mutlaka :digits basamaklı olmalıdır.',
    'digits_between'       => ':Attribute mutlaka en az :min, en fazla :max basamaklı olmalıdır.',
    'dimensions'           => ':Attribute geçersiz resim boyutlarına sahip.',
    'distinct'             => ':Attribute alanı yinelenen bir değere sahip.',
    'doesnt_end_with'      => ':Attribute aşağıdakilerden biriyle bitemez: :values.',
    'doesnt_start_with'    => ':Attribute aşağıdakilerden biriyle başlamayabilir: :values.',
    'email'                => ':Attribute mutlaka geçerli bir e-posta adresi olmalıdır.',
    'ends_with'            => ':Attribute sadece şu değerlerden biriyle bitebilir: :values.',
    'enum'                 => 'Seçilen :attribute değeri geçersiz.',
    'exists'               => 'Seçili :attribute geçersiz.',
    'extensions'           => ':attribute alanı aşağıdaki uzantılardan birine sahip olmalıdır: :values.',
    'file'                 => ':Attribute mutlaka bir dosya olmalıdır.',
    'filled'               => ':Attribute mutlaka doldurulmalıdır.',
    'gt'                   => [
        'array'   => ':Attribute mutlaka :value sayısından daha fazla öge içermelidir.',
        'file'    => ':Attribute mutlaka :value kilobayt\'tan büyük olmalıdır.',
        'numeric' => ':Attribute mutlaka :value sayısından büyük olmalıdır.',
        'string'  => ':Attribute mutlaka :value karakterden uzun olmalıdır.',
    ],
    'gte'                  => [
        'array'   => ':Attribute mutlaka :value veya daha fazla öge içermelidir.',
        'file'    => ':Attribute mutlaka :value kilobayt\'tan büyük veya eşit olmalıdır.',
        'numeric' => ':Attribute mutlaka :value sayısından büyük veya eşit olmalıdır.',
        'string'  => ':Attribute mutlaka :value karakterden uzun veya eşit olmalıdır.',
    ],
    'hex_color'            => ':attribute alanı geçerli bir onaltılık renk olmalıdır.',
    'image'                => ':Attribute mutlaka bir resim olmalıdır.',
    'in'                   => 'Seçili :attribute geçersiz.',
    'in_array'             => ':Attribute :other içinde mevcut değil.',
    'integer'              => ':Attribute mutlaka bir tam sayı olmalıdır.',
    'ip'                   => ':Attribute mutlaka geçerli bir IP adresi olmalıdır.',
    'ipv4'                 => ':Attribute mutlaka geçerli bir IPv4 adresi olmalıdır.',
    'ipv6'                 => ':Attribute mutlaka geçerli bir IPv6 adresi olmalıdır.',
    'json'                 => ':Attribute mutlaka geçerli bir JSON içeriği olmalıdır.',
    'list'                 => ':attribute alanı bir liste olmalıdır.',
    'lowercase'            => ':Attribute küçük harf olmalıdır.',
    'lt'                   => [
        'array'   => ':Attribute mutlaka :value sayısından daha az öge içermelidir.',
        'file'    => ':Attribute mutlaka :value kilobayt\'tan küçük olmalıdır.',
        'numeric' => ':Attribute mutlaka :value sayısından küçük olmalıdır.',
        'string'  => ':Attribute mutlaka :value karakterden kısa olmalıdır.',
    ],
    'lte'                  => [
        'array'   => ':Attribute mutlaka :value veya daha az öge içermelidir.',
        'file'    => ':Attribute mutlaka :value kilobayt\'tan küçük veya eşit olmalıdır.',
        'numeric' => ':Attribute mutlaka :value sayısından küçük veya eşit olmalıdır.',
        'string'  => ':Attribute mutlaka :value karakterden kısa veya eşit olmalıdır.',
    ],
    'mac_address'          => ':Attribute geçerli bir MAC adresi olmalıdır.',
    'max'                  => [
        'array'   => ':Attribute en fazla :max öge içerebilir.',
        'file'    => ':Attribute en fazla :max kilobayt olabilir.',
        'numeric' => ':Attribute en fazla :max olabilir.',
        'string'  => ':Attribute en fazla :max karakter olabilir.',
    ],
    'max_digits'           => ':Attribute en fazla :max basamak içermelidir.',
    'mimes'                => ':Attribute mutlaka :values biçiminde bir dosya olmalıdır.',
    'mimetypes'            => ':Attribute mutlaka :values biçiminde bir dosya olmalıdır.',
    'min'                  => [
        'array'   => ':Attribute en az :min öge içerebilir.',
        'file'    => ':Attribute en az :min kilobayt olabilir.',
        'numeric' => ':Attribute en az :min olabilir.',
        'string'  => ':Attribute en az :min karakter olabilir.',
    ],
    'min_digits'           => ':Attribute en az :min basamak içermelidir.',
    'missing'              => ':Attribute alanı eksik olmalıdır.',
    'missing_if'           => ':Other, :value olduğunda :attribute alanı eksik olmalıdır.',
    'missing_unless'       => ':Other, :value değilse :attribute alanı eksik olmalıdır.',
    'missing_with'         => ':Values mevcut olduğunda :attribute alanı eksik olmalıdır.',
    'missing_with_all'     => ':Values mevcut olduğunda :attribute alanı eksik olmalıdır.',
    'multiple_of'          => ':Attribute, :value\'nin katları olmalıdır',
    'not_in'               => 'Seçili :attribute geçersiz.',
    'not_regex'            => ':Attribute biçimi geçersiz.',
    'numeric'              => ':Attribute mutlaka bir sayı olmalıdır.',
    'password'             => [
        'letters'       => ':Attribute en az bir harf içermelidir.',
        'mixed'         => ':Attribute en az bir büyük harf ve bir küçük harf içermelidir.',
        'numbers'       => ':Attribute en az bir sayı içermelidir.',
        'symbols'       => ':Attribute en az bir sembol içermelidir.',
        'uncompromised' => 'Verilen :attribute bir veri sızıntısında ortaya çıktı. Lütfen farklı bir :attribute seçin.',
    ],
    'present'              => ':Attribute mutlaka mevcut olmalıdır.',
    'present_if'           => ':other, :value olduğunda :attribute alanı mevcut olmalıdır.',
    'present_unless'       => ':other, :value olmadığı sürece :attribute alanı mevcut olmalıdır.',
    'present_with'         => ':values mevcut olduğunda :attribute alanı mevcut olmalıdır.',
    'present_with_all'     => ':values mevcut olduğunda :attribute alanı mevcut olmalıdır.',
    'prohibited'           => ':Attribute alanı kısıtlanmıştır.',
    'prohibited_if'        => ':Other alanının değeri :value ise :attribute alanına veri girişi yapılamaz.',
    'prohibited_unless'    => ':Other alanı :value değerlerinden birisi değilse :attribute alanına veri girişi yapılamaz.',
    'prohibits'            => ':Attribute alanı :other alanının mevcut olmasını yasaklar.',
    'regex'                => ':Attribute biçimi geçersiz.',
    'relatable'            => 'Bu :attribute bu kaynakla ilişkili olmayabilir.',
    'required'             => ':Attribute mutlaka gereklidir.',
    'required_array_keys'  => ':Attribute değeri şu verileri içermelidir: :values.',
    'required_if'          => ':Attribute :other :value değerine sahip olduğunda mutlaka gereklidir.',
    'required_if_accepted' => ':Attribute alanı, :other kabul edildiğinde gereklidir.',
    'required_if_declined' => ':other seçeneği reddedildiğinde :attribute alanı gereklidir.',
    'required_unless'      => ':Attribute :other :values değerlerinden birine sahip olmadığında mutlaka gereklidir.',
    'required_with'        => ':Attribute :values varken mutlaka gereklidir.',
    'required_with_all'    => ':Attribute herhangi bir :values değeri varken mutlaka gereklidir.',
    'required_without'     => ':Attribute :values yokken mutlaka gereklidir.',
    'required_without_all' => ':Attribute :values değerlerinden herhangi biri yokken mutlaka gereklidir.',
    'same'                 => ':Attribute ile :other aynı olmalıdır.',
    'size'                 => [
        'array'   => ':Attribute mutlaka :size ögeye sahip olmalıdır.',
        'file'    => ':Attribute mutlaka :size kilobayt olmalıdır.',
        'numeric' => ':Attribute mutlaka :size olmalıdır.',
        'string'  => ':Attribute mutlaka :size karakterli olmalıdır.',
    ],
    'starts_with'          => ':Attribute sadece şu değerlerden biriyle başlayabilir: :values.',
    'string'               => ':Attribute mutlaka bir metin olmalıdır.',
    'timezone'             => ':Attribute mutlaka geçerli bir saat dilimi olmalıdır.',
    'ulid'                 => ':Attribute geçerli bir ULID olmalıdır.',
    'unique'               => ':Attribute zaten alınmış.',
    'uploaded'             => ':Attribute yüklemesi başarısız.',
    'uppercase'            => ':Attribute büyük harf olmalıdır.',
    'url'                  => ':Attribute biçimi geçersiz.',
    'uuid'                 => ':Attribute mutlaka geçerli bir UUID olmalıdır.',
    'attributes'           => [
        'address'                  => 'adres',
        'affiliate_url'            => 'bağlı kuruluş URL\'si',
        'age'                      => 'yaş',
        'amount'                   => 'tutar',
        'announcement'             => 'duyuru',
        'area'                     => 'alan',
        'audience_prize'           => 'seyirci ödülü',
        'available'                => 'mevcut',
        'birthday'                 => 'doğum günü',
        'body'                     => 'gövde',
        'city'                     => 'şehir',
        'compilation'              => 'derleme',
        'concept'                  => 'kavram',
        'conditions'               => 'koşullar',
        'content'                  => 'i̇çerik',
        'country'                  => 'ülke',
        'cover'                    => 'kapak',
        'created_at'               => 'oluşturulduğunda',
        'creator'                  => 'yaratıcı',
        'currency'                 => 'para birimi',
        'current_password'         => 'mevcut şifre',
        'customer'                 => 'müşteri',
        'date'                     => 'tarih',
        'date_of_birth'            => 'doğum tarihi',
        'dates'                    => 'tarih',
        'day'                      => 'gün',
        'deleted_at'               => 'silindi',
        'description'              => 'açıklama',
        'display_type'             => 'ekran tipi',
        'district'                 => 'semt',
        'duration'                 => 'süre',
        'email'                    => 'e-posta adresi',
        'excerpt'                  => 'alıntı',
        'filter'                   => 'filtre',
        'finished_at'              => 'bitti',
        'first_name'               => 'adı',
        'gender'                   => 'cinsiyet',
        'grand_prize'              => 'Büyük ödül',
        'group'                    => 'grup',
        'hour'                     => 'saat',
        'image'                    => 'resim',
        'image_desktop'            => 'masaüstü resmi',
        'image_main'               => 'Ana resim',
        'image_mobile'             => 'mobil resim',
        'images'                   => 'Görüntüler',
        'is_audience_winner'       => 'seyirci kazananı mı',
        'is_hidden'                => 'gizli',
        'is_subscribed'            => 'abone olundu',
        'is_visible'               => 'görünür',
        'is_winner'                => 'kazanan',
        'items'                    => 'öğeler',
        'key'                      => 'anahtar',
        'last_name'                => 'soyadı',
        'lesson'                   => 'ders',
        'line_address_1'           => 'hat adresi 1',
        'line_address_2'           => 'hat adresi 2',
        'login'                    => 'giriş yapmak',
        'message'                  => 'ileti',
        'middle_name'              => 'ikinci ad',
        'minute'                   => 'dakika',
        'mobile'                   => 'cep telefonu',
        'month'                    => 'ay',
        'name'                     => 'adı',
        'national_code'            => 'ulusal kod',
        'number'                   => 'sayı',
        'password'                 => 'parola',
        'password_confirmation'    => 'parola (tekrar)',
        'phone'                    => 'telefon',
        'photo'                    => 'fotoğraf',
        'portfolio'                => 'portföy',
        'postal_code'              => 'posta kodu',
        'preview'                  => 'Ön izleme',
        'price'                    => 'fiyat',
        'product_id'               => 'ürün kimliği',
        'product_uid'              => 'ürün UID\'si',
        'product_uuid'             => 'ürün UUID\'si',
        'promo_code'               => 'promosyon kodu',
        'province'                 => 'bölge',
        'quantity'                 => 'miktar',
        'reason'                   => 'sebep',
        'recaptcha_response_field' => 'recaptcha yanıt alanı',
        'referee'                  => 'hakem',
        'referees'                 => 'hakemler',
        'reject_reason'            => 'nedeni reddetmek',
        'remember'                 => 'hatırlamak',
        'restored_at'              => 'restore',
        'result_text_under_image'  => 'resmin altındaki sonuç metni',
        'role'                     => 'rol',
        'rule'                     => 'kural',
        'rules'                    => 'tüzük',
        'second'                   => 'saniye',
        'sex'                      => 'cinsiyet',
        'shipment'                 => 'gönderi',
        'short_text'               => 'kısa metin',
        'size'                     => 'boyut',
        'skills'                   => 'yetenekler',
        'slug'                     => 'sümüklüböcek',
        'specialization'           => 'uzmanlık',
        'started_at'               => 'Başlangıç',
        'state'                    => 'durum',
        'status'                   => 'durum',
        'street'                   => 'sokak',
        'student'                  => 'öğrenci',
        'subject'                  => 'ders',
        'tag'                      => 'etiket',
        'tags'                     => 'Etiketler',
        'teacher'                  => 'öğretmen',
        'terms'                    => 'şartlar',
        'test_description'         => 'test açıklaması',
        'test_locale'              => 'yerel ayar',
        'test_name'                => 'deneme adı',
        'text'                     => 'metin',
        'time'                     => 'zaman',
        'title'                    => 'unvan',
        'type'                     => 'tip',
        'updated_at'               => 'güncellendi',
        'user'                     => 'kullanıcı',
        'username'                 => 'kullanıcı adı',
        'value'                    => 'değer',
        'year'                     => 'yıl',
    ],
    'custom'               => [
        'niteleyici-adi' => [
            'kural-adi' => 'Özel doğrulama mesajı',
        ],
    ],
];


================================================
FILE: resources/lang/tr.json
================================================
{
    "(and :count more error)": "(ve :count hata daha var)",
    "(and :count more errors)": "(ve :count hata daha var)|(ve :count hata daha var)|(ve :count hata daha var)",
    "A new verification link has been sent to the email address you provided in your profile settings.": "Profil ayarlarınızda belirttiğiniz e-posta adresine yeni bir doğrulama bağlantısı gönderildi.",
    "A new verification link has been sent to your email address.": "E-posta adresinize yeni bir doğrulama bağlantısı gönderildi.",
    "A Timeout Occurred": "Bir Zaman Aşımı Oluştu",
    "Accept": "Kabul etmek",
    "Accept Invitation": "Daveti Kabul Et",
    "Accepted": "Kabul Edilmiş",
    "Action": "İşlem",
    "Actions": "İşlemler",
    "Add": "Ekle",
    "Add :name": ":name ekle",
    "Add a new team member to your team, allowing them to collaborate with you.": "Ekibinize yeni bir ekip üyesi ekleyerek, sizinle işbirliği yapmalarına izin verin.",
    "Add additional security to your account using two factor authentication.": "İki faktörlü kimlik doğrulama kullanarak hesabınıza ek güvenlik ekleyin.",
    "Add Team Member": "Ekip Üyesi Ekle",
    "Added.": "Eklendi.",
    "Admin": "Yönetici",
    "Administrator": "Yönetici",
    "Administrator users can perform any action.": "Yöneticiler herhangi bir eylemi gerçekleştirebilir.",
    "Agree": "Kabul etmek",
    "All of the people that are part of this team.": "Bu ekibin parçası olan tüm kişiler.",
    "All rights reserved.": "Tüm hakları saklıdır.",
    "Already registered?": "Zaten Üye Misiniz?",
    "Already Reported": "Zaten Bildirildi",
    "API Token": "API Jeton",
    "API Token Permissions": "API Jeton İzinleri",
    "API Tokens": "API Jetonları",
    "API tokens allow third-party services to authenticate with our application on your behalf.": "API jetonları, üçüncü taraf hizmetlerin sizin adınıza uygulamamızla kimlik doğrulaması yapmasına izin verir.",
    "Archive": "Arşiv",
    "Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.": "Bu ekibi silmek istediğinizden emin misiniz? Bir ekip silindiğinde, tüm kaynakları ve verileri kalıcı olarak silinecektir.",
    "Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.": "Hesabınızı silmek istediğinizden emin misiniz? Hesabınız silindiğinde, tüm kaynakları ve verileri kalıcı olarak silinecektir. Lütfen hesabınızı kalıcı olarak silmek istediğinizi onaylamak için parolanızı girin.",
    "Are you sure you would like to delete this API token?": "Bu API jetonunu silmek istediğinizden emin misiniz?",
    "Are you sure you would like to leave this team?": "Bu kişiyi ekipten çıkarmak istediğinizden emin misiniz?",
    "Are you sure you would like to remove this person from the team?": "Bu kişiyi ekipten çıkarmak istediğinizden emin misiniz?",
    "Assign": "Atamak",
    "Associate": "İş arkadaşı",
    "Attach": "İliştir",
    "Bad Gateway": "Geçersiz Ağ Geçidi",
    "Bad Request": "Geçersiz istek",
    "Bandwidth Limit Exceeded": "Bant Genişliği Sınırı Aşıldı",
    "Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.": "Devam etmeden önce, size az önce e-postayla gönderdiğimiz bağlantıya tıklayarak e-posta adresinizi doğrulayabilir misiniz? E-postayı almadıysanız, size memnuniyetle başka bir e-posta göndeririz.",
    "Browse": "Araştır",
    "Browser Sessions": "Tarayıcı Oturumları",
    "Cancel": "İptal et",
    "Choose": "Seç",
    "Choose :name": ":name'u seçin",
    "Choose File": "Dosya Seç",
    "Choose Image": "Resim Seç",
    "Click here to re-send the verification email.": "Doğrulama e-postasını yeniden göndermek için burayı tıklayın.",
    "Click to copy": "Kopyalamak için tıklayın",
    "Client Closed Request": "İstemci Kapandı İsteği",
    "Close": "Kapat",
    "Code": "Kod",
    "Collapse": "Yıkılmak",
    "Collapse All": "Hepsini Daralt",
    "Comment": "Yorum",
    "Confirm": "Onayla",
    "Confirm Password": "Parolayı Onayla",
    "Conflict": "Çakışma",
    "Connect": "Bağlamak",
    "Connection Closed Without Response": "Bağlantı Yanıtsız Kapatıldı",
    "Connection Timed Out": "Bağlantı Zaman Aşımına Uğradı",
    "Continue": "Devam Et",
    "Create": "Oluştur",
    "Create :name": ":name oluştur",
    "Create a new team to collaborate with others on projects.": "Başkalarıyla projelerde işbirliği yapmak için yeni bir ekip oluşturun.",
    "Create Account": "Hesap Oluştur",
    "Create API Token": "Api Jetonu Oluştur",
    "Create New Team": "Yeni Ekip Oluştur",
    "Create Team": "Ekip Oluştur",
    "Created": "Oluşturuldu",
    "Created.": "Oluşturuldu.",
    "Current Password": "Mevcut Parola",
    "Dashboard": "Gösterge Paneli",
    "Delete": "Sil",
    "Delete :name": ":name'u sil",
    "Delete Account": "Hesabı Sil",
    "Delete API Token": "API Jetonunu Sil",
    "Delete Team": "Ekibi Sil",
    "Detach": "Ayırmak",
    "Details": "Detaylar",
    "Disable": "Devre Dışı Bırak",
    "Discard": "At",
    "Done": "Tamamlamak",
    "Done.": "Bitti.",
    "Down": "Aşağı",
    "Duplicate": "Kopyalamak",
    "Duplicate :name": "Çoğalt: ad",
    "Edit": "Düzenle",
    "Edit :name": ":name'u düzenle",
    "Edit Profile": "Profili Düzenle",
    "Editor": "Editör",
    "Editor users have the ability to read, create, and update.": "Editörler okuma, oluşturma ve güncelleme yapabilir.",
    "Email": "E-Posta",
    "Email Password Reset Link": "Parola Sıfırlama Bağlantısını Gönder",
    "Enable": "Etkinleştir",
    "Ensure your account is using a long, random password to stay secure.": "Hesabınızın güvenliğini korumak için uzun, rastgele karakterlerden oluşan bir parola kullandığınızdan emin olun.",
    "errors": "hatalar",
    "Expand": "Genişletmek",
    "Expand All": "Hepsini genişlet",
    "Expectation Failed": "Beklenti Başarısız",
    "Explanation": "Açıklama",
    "Export": "İhracat",
    "Export :name": "Export :name",
    "Failed Dependency": "Başarısız Bağımlılık",
    "File": "Dosya",
    "Files": "Dosyalar",
    "Finish enabling two factor authentication.": "İki faktörlü kimlik doğrulamayı etkinleştirmeyi tamamlayın.",
    "For your security, please confirm your password to continue.": "Güvenliğiniz için lütfen devam etmek için parolanızı onaylayın.",
    "Forbidden": "Yasak",
    "Forgot your password?": "Parolanızı mı unuttunuz?",
    "Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.": "Parolanızı mı unuttunuz? Sorun değil. Sadece e-posta adresinizi bize söyleyin size yeni parolanızı belirleyebileceğiniz bir parola sıfırlama linki gönderelim.",
    "Found": "Bulundu",
    "Gateway Timeout": "Ağ Geçidi Zaman Aşımı",
    "Go Home": "Anasayfaya Git",
    "Go to page :page": ":Page sayfasına git",
    "Gone": "Gitmiş",
    "Great! You have accepted the invitation to join the :team team.": "Harika! :team ekibine katılma davetini kabul ettiniz.",
    "Hello!": "Merhaba!",
    "Hide": "Saklamak",
    "Hide :name": ":name'u gizle",
    "Home": "Ev",
    "HTTP Version Not Supported": "HTTP Sürümü Desteklenmiyor",
    "I agree to the :terms_of_service and :privacy_policy": ":Terms_of_service ve :privacy_policy'yi kabul ediyorum",
    "I'm a teapot": "Ben bir demliğim",
    "If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.": "Gerekirse, tüm cihazlarınızda diğer tüm tarayıcı oturumlarınızdan çıkış yapabilirsiniz. Son oturumlarınızdan bazıları aşağıda listelenmiştir; ancak, bu liste kapsamlı olmayabilir. Hesabınızın ele geçirildiğini düşünüyorsanız, parolanızı da güncellemelisiniz.",
    "If you already have an account, you may accept this invitation by clicking the button below:": "Zaten bir hesabınız varsa, aşağıdaki butona tıklayarak bu daveti kabul edebilirsiniz:",
    "If you did not create an account, no further action is required.": "Bir hesap oluşturmadıysanız, başka bir işlem yapmanıza gerek yoktur.",
    "If you did not expect to receive an invitation to this team, you may discard this email.": "Bu ekibe davet almayı beklemiyorsanız, bu e-postayı yok sayabilirsiniz.",
    "If you did not request a password reset, no further action is required.": "Bir parola sıfırlama talebinde bulunmadıysanız, başka bir işlem yapmanıza gerek yoktur.",
    "If you do not have an account, you may create one by clicking the button below. After creating an account, you may click the invitation acceptance button in this email to accept the team invitation:": "Bir hesabınız yoksa, aşağıdaki butona tıklayarak bir tane oluşturabilirsiniz. Bir hesap oluşturduktan sonra, ekip davetini kabul etmek için bu e-postadaki daveti kabul et butonuna tıklayabilirsiniz:",
    "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "\":actionText\" butonuna tıklamakta sorun yaşıyorsanız, aşağıdaki bağlantıyı kopyalayıp\ntarayıcınıza yapıştırın:",
    "IM Used": "IM Kullanıldı",
    "Image": "Resim",
    "Impersonate": "Kimliğine bürün",
    "Impersonation": "Kimliğe bürünme",
    "Import": "İçe aktarmak",
    "Import :name": "İthalat :name",
    "Insufficient Storage": "Yetersiz depolama",
    "Internal Server Error": "İç Sunucu Hatası",
    "Introduction": "giriiş",
    "Invalid JSON was returned from the route.": "Yoldan geçersiz JSON döndürüldü.",
    "Invalid SSL Certificate": "Geçersiz SSL Sertifikası",
    "Last active": "Son aktiflik",
    "Last used": "Son kullanım",
    "Leave": "Ayrıl",
    "Leave Team": "Ekipten Ayrıl",
    "length": "uzunluk",
    "Length Required": "Uzunluk Gerekli",
    "Like": "Beğenmek",
    "Load": "Yük",
    "Localize": "Yerelleştir",
    "Location": "Konum",
    "Locked": "Kilitli",
    "Log In": "Giriş Yap",
    "Log in": "Giriş yap",
    "Log Out": "Çıkış Yap",
    "Log Out Other Browser Sessions": "Diğer Tarayıcılardaki Oturumları Sonlandır",
    "Login": "Giriş Yap",
    "Logout": "Çıkış Yap",
    "Loop Detected": "Döngü Tespit Edildi",
    "Maintenance Mode": "Bakım Modu",
    "Manage Account": "Hesabı Yönet",
    "Manage and log out your active sessions on other browsers and devices.": "Diğer tarayıcılarda ve cihazlardaki aktif oturumlarınızı yönetin ve oturumları kapatın.",
    "Manage API Tokens": "API Jetonlarını Yönetin",
    "Manage Role": "Rolü Yönet",
    "Manage Team": "Ekibi Yönet",
    "Method Not Allowed": "İzin Verilmeyen Yöntem",
    "Misdirected Request": "Yanlış Yönlendirilmiş İstek",
    "Moved Permanently": "Kalıcı Olarak Taşındı",
    "Multi-Status": "Çoklu Durum",
    "Multiple Choices": "Çoklu Seçimler",
    "Name": "Ad",
    "Network Authentication Required": "Ağ Kimlik Doğrulaması Gerekli",
    "Network Connect Timeout Error": "Ağ Bağlantısı Zaman Aşımı Hatası",
    "Network Read Timeout Error": "Ağ Okuma Zaman Aşımı Hatası",
    "New": "Yeni",
    "New :name": "Yeni :name",
    "New Password": "Yeni Parola",
    "No": "Hayır",
    "No Content": "İçerik Yok",
    "Non-Authoritative Information": "Yetkili Olmayan Bilgiler",
    "Not Acceptable": "Kabul Edilemez",
    "Not Extended": "Genişletilmemiş",
    "Not Found": "Bulunamadı",
    "Not Implemented": "Uygulanmadı",
    "Not Modified": "Değiştirilmedi",
    "of": "-den",
    "OK": "Tamam",
    "Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.": "Bir ekip silindiğinde, tüm kaynakları ve verileri kalıcı olarak silinecektir. Bu ekibi silmeden önce, lütfen bu ekiple ilgili saklamak istediğiniz tüm verileri veya bilgileri indirin.",
    "Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.": "Hesabınız silindiğinde, tüm kaynakları ve verileri kalıcı olarak silinecektir. Hesabınızı silmeden önce lütfen saklamak istediğiniz tüm verileri veya bilgileri indirin.",
    "Open": "Açık",
    "Open in a current window": "Geçerli pencerede aç",
    "Open in a new window": "Yeni bir pencerede aç",
    "Open in a parent frame": "Bir üst çerçevede aç",
    "Open in the topmost frame": "En üst çerçevede aç",
    "Open on the website": "Web sitesinde aç",
    "Origin Is Unreachable": "Kökeni Ulaşılamaz",
    "Page Expired": "Sayfa zaman aşımına uğradı",
    "Pagination Navigation": "Sayfalandırma Çubuğu",
    "Partial Content": "Kısmi İçerik",
    "Password": "Parola",
    "Payload Too Large": "Veri Çok Büyük",
    "Payment Required": "ödeme gerekli",
    "Pending Team Invitations": "Bekleyen Ekip Davetiyeleri",
    "Permanent Redirect": "Kalıcı Yönlendirme",
    "Permanently delete this team.": "Bu ekibi kalıcı olarak sil",
    "Permanently delete your account.": "Hesabını kalıcı olarak sil",
    "Permissions": "İzinler",
    "Photo": "Resim",
    "Please click the button below to verify your email address.": "E-posta adresinizi doğrulamak için lütfen aşağıdaki butona tıklayın.",
    "Please confirm access to your account by entering one of your emergency recovery codes.": "Girişinizi onaylamak için lütfen hesap kurtarma kodlarınızdan birini girin.",
    "Please confirm access to your account by entering the authentication code provided by your authenticator application.": "Lütfen kimlik doğrulayıcı uygulamanız tarafından sağlanan kimlik doğrulama kodunu girerek hesabınıza erişimi onaylayın.",
    "Please copy your new API token. For your security, it won't be shown again.": "Lütfen yeni API jetonunuzu kopyalayın. Güvenliğiniz için bir daha gösterilmeyecek.",
    "Please enter your password to confirm you would like to log out of your other browser sessions across all of your devices.": "Tüm cihazlarınızda diğer tarayıcı oturumlarınızdan çıkmak istediğinizi onaylamak için lütfen parolanızı girin.",
    "Please provide the email address of the person you would like to add to this team.": "Lütfen bu ekibe eklemek istediğiniz kişinin e-posta adresini belirtin.",
    "Precondition Failed": "Ön Koşul Başarısız",
    "Precondition Required": "Ön Koşul Gerekli",
    "Preview": "Önizle",
    "Price": "Fiyat",
    "Privacy Policy": "Gizlilik Politikası",
    "Processing": "İşleniyor",
    "Profile": "Profil",
    "Profile Information": "Profil Bilgileri",
    "Proxy Authentication Required": "Proxy Kimlik Doğrulaması Gerekli",
    "Railgun Error": "Railgun Hatası",
    "Range Not Satisfiable": "Aralık Yetersiz",
    "Record": "Kayıt",
    "Recovery Code": "Kurtarma Kodu",
    "Regards": "En iyi dileklerle",
    "Regenerate Recovery Codes": "Kurtarma Kodunu Tekrar Üret",
    "Register": "Kayıt Ol",
    "Remember me": "Beni hatırla",
    "Remove": "Kaldır",
    "Remove Photo": "Resmi Kaldır",
    "Remove Team Member": "Ekip Üyesini Kaldır",
    "Request Header Fields Too Large": "İstek Başlık Alanları Çok Büyük",
    "Request Timeout": "İstek zaman aşımına uğradı",
    "Resend Verification Email": "Onay Mailini Tekrar Gönder",
    "Reset Content": "İçeriği Sıfırla",
    "Reset Password": "Parolayı Sıfırla",
    "Reset Password Notification": "Parola Sıfırlama Bildirimi",
    "Restore": "Onar",
    "Restore :name": ":name'u geri yükle",
    "results": "sonuçlar",
    "Retry With": "İle Yeniden Dene",
    "Role": "Rol",
    "Save": "Kaydet",
    "Save & Close": "Kaydet kapat",
    "Save & Return": "Kaydet ve Geri Dön",
    "Save :name": ":name'u kaydet",
    "Saved.": "Kaydedildi.",
    "Search": "Ara",
    "Search :name": "Ara :name",
    "See Other": "Diğerlerini Gör",
    "Select": "Seç",
    "Select A New Photo": "Yeni Bir Fotoğraf Seçin",
    "Select All": "Hepsini seç",
    "Send": "Göndermek",
    "Server Error": "Sunucu Hatası",
    "Service Unavailable": "Hizmet Kullanılamıyor",
    "Session Has Expired": "Oturum süresi doldu",
    "Settings": "Ayarlar",
    "Setup Key": "Kurulum Anahtarı",
    "Show": "Göstermek",
    "Show :name": ":name'u göster",
    "Show All": "Hepsini Göster ↓",
    "Show Recovery Codes": "Kurtarma Kodlarını Göster",
    "Showing": "Gösteri",
    "Sign In": "Kayıt olmak",
    "Solve": "Çözmek",
    "SSL Handshake Failed": "SSL El Sıkışma Başarısız",
    "Start": "Başlangıç",
    "Stop": "Durmak",
    "Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.": "Bu kurtarma kodlarını güvenli bir parola yöneticisinde saklayın. İki faktörlü kimlik doğrulama cihazınız kaybolursa hesabınıza erişimi kurtarmak için kullanılabilirler.",
    "Submit": "Göndermek",
    "Subscribe": "Abone Ol",
    "Switch": "Anahtar",
    "Switch Teams": "Ekip Değiştir",
    "Switch To Role": "Role Geç",
    "Switching Protocols": "Protokoller Değiştiriliyor",
    "Tag": "Etiket",
    "Tags": "Etiketler",
    "Team Details": "Ekip Detayları",
    "Team Invitation": "Ekip Davetiyesi",
    "Team Members": "Ekip Üyeleri",
    "Team Name": "Ekip İsmi",
    "Team Owner": "Ekip Sahibi",
    "Team Settings": "Ekip Ayarları",
    "Temporary Redirect": "Geçici Yönlendirme",
    "Terms of Service": "Hizmet Koşulları",
    "The :attribute must be a valid role.": ":Attribute geçerli bir rol olmalıdır.",
    "The :attribute must be at least :length characters and contain at least one number.": ":Attribute en az :length karakterli olmalı ve en az bir sayı içermelidir.",
    "The :attribute must be at least :length characters and contain at least one special character and one number.": ":Attribute en az :length karakterli olmalı ve en az bir özel karakter ve bir sayı içermelidir.",
    "The :attribute must be at least :length characters and contain at least one special character.": ":Attribute en az :length karakterli olmalı ve en az bir özel karakter içermelidir",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one number.": ":Attribute en az :length karakterli olmalı ve en az birer büyük harf ve sayı içermelidir",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one special character.": ":Attribute en az :length karakterli olmalı ve en az birer büyük harf ve özel karakter içermelidir",
    "The :attribute must be at least :length characters and contain at least one uppercase character, one number, and one special character.": ":Attribute en az :length karakterli olmalı ve en az birer büyük harf, sayı ve özel karakter içermelidir",
    "The :attribute must be at least :length characters and contain at least one uppercase character.": ":Attribute en az :length karakterli olmalı ve en az bir büyük harf içermelidir",
    "The :attribute must be at least :length characters.": ":Attribute en az :length karakterli olmalı.",
    "The given data was invalid.": "Verilen veriler geçersizdi.",
    "The password is incorrect.": "Parola hatalı.",
    "The provided password does not match your current password.": "Belirtilen parola mevcut parolanızla eşleşmiyor.",
    "The provided password was incorrect.": "Belirtilen parola yanlış.",
    "The provided two factor authentication code was invalid.": "Belirtilen iki faktörlü kimlik doğrulama kodu geçersiz.",
    "The provided two factor recovery code was invalid.": "Sağlanan iki faktörlü kurtarma kodu geçersizdi.",
    "The response is not a streamed response.": "Yanıt akışlı bir yanıt değil.",
    "The response is not a view.": "Yanıt bir görünüm değildir.",
    "The team's name and owner information.": "Ekibin adı ve sahip bilgileri.",
    "These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.": "Bu kişiler ekibinize davet edildi ve bir davet e-postası gönderildi. E-posta davetiyesini kabul ederek ekibe katılabilirler.",
    "This action is unauthorized.": "Bu işlem izinsizdir.",
    "This device": "Bu cihaz",
    "This is a secure area of the application. Please confirm your password before continuing.": "Bu uygulamanın güvenli bir alandır. Lütfen devam etmeden önce parolanızı onaylayın.",
    "This password does not match our records.": "Parolanız kayıtlarımızla eşleşmiyor.",
    "This password reset link will expire in :count minutes.": "Bu parola sıfırlama bağlantısının geçerliliği :count dakika sonra sona erecek.",
    "This user already belongs to the team.": "Bu kullanıcı zaten ekibe katılmış.",
    "This user has already been invited to the team.": "Bu kullanıcı zaten ekibe davet edildi.",
    "to": "a",
    "To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.": "İki faktörlü kimlik doğrulamayı etkinleştirmeyi tamamlamak için telefonunuzun kimlik doğrulama uygulamasını kullanarak aşağıdaki QR kodunu tarayın veya kurulum anahtarını girin ve oluşturulan OTP kodunu sağlayın.",
    "Toggle navigation": "Menüyü Aç/Kapat",
    "Token Name": "Jeton İsmi",
    "Too Early": "Çok erken",
    "Too Many Requests": "Çok Fazla İstek",
    "Translate": "Çevirmek",
    "Translate It": "Çevir",
    "Two Factor Authentication": "İki Faktörlü Kimlik Doğrulama",
    "Two factor authentication is now enabled. Scan the following QR code using your phone's authenticator application or enter the setup key.": "İki faktörlü kimlik doğrulama şimdi etkinleştirildi. Telefonunuzun kimlik doğrulama uygulamasını kullanarak aşağıdaki QR kodunu tarayın veya kurulum anahtarını girin.",
    "Unauthorized": "İzinsiz",
    "Unavailable For Legal Reasons": "Yasal Sebepler Nedeniyle Kullanılamıyor",
    "Unknown": "Bilinmeyen",
    "Unknown Error": "Bilinmeyen Hata",
    "Unpack": "Paketi aç",
    "Unprocessable Entity": "İşlenemeyen Varlık",
    "Unsubscribe": "Abonelikten çık",
    "Unsupported Media Type": "Desteklenmeyen Medya Türü",
    "Up": "Yukarı",
    "Update": "Güncelle",
    "Update :name": "Güncelleme :name",
    "Update Password": "Parolayı Güncelle",
    "Update your account's profile information and email address.": "Hesabınızın profil bilgilerini ve e-posta adresini güncelleyin.",
    "Upgrade Required": "Yükseltme Gerekli",
    "URI Too Long": "URI Çok Uzun",
    "Use a recovery code": "Kurtarma kodu kullan",
    "Use an authentication code": "Bir kimlik doğrulama kodu kullanın",
    "Use Proxy": "Proxy Kullan",
    "User": "Kullanıcı",
    "Variant Also Negotiates": "Varyant Ayrıca Müzakere Ediyor",
    "Verify Email Address": "E-posta Adresini Doğrula",
    "View": "Görüntüle",
    "View :name": ":name'u görüntüle",
    "We were unable to find a registered user with this email address.": "Bu e-posta adresiyle kayıtlı bir kullanıcı bulamadık.",
    "Web Server is Down": "Web Sunucusu Çalışmıyor",
    "When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.": "İki faktörlü kimlik doğrulama etkinleştirildiğinde, kimlik doğrulama sırasında güvenli ve rastgele bir belirteç girmeniz istenir. Bu belirteci, telefonunuzun Google Authenticator uygulamasından alabilirsiniz.",
    "Whoops!": "Hoppala!",
    "Whoops! Something went wrong.": "Eyvaaah! Bir şeyler ters gitti.",
    "Yes": "Evet",
    "You are receiving this email because we received a password reset request for your account.": "Hesabınız adına bir parola sıfırlama talebi aldığımız için bu e-postayı alıyorsunuz.",
    "You have been invited to join the :team team!": ":Team ekibine katılmaya davet edildiniz!",
    "You have enabled two factor authentication.": "İki faktörlü kimlik doğrulamayı etkinleştirdiniz.",
    "You have not enabled two factor authentication.": "İki faktörlü kimlik doğrulamayı etkinleştirmediniz.",
    "You may accept this invitation by clicking the button below:": "Aşağıdaki butona tıklayarak bu daveti kabul edebilirsiniz:",
    "You may delete any of your existing tokens if they are no longer needed.": "Artık ihtiyaç duyulmuyorsa mevcut jetonlarınızdan herhangi birini silebilirsiniz.",
    "You may not delete your personal team.": "Kişisel ekibinizi silemezsiniz.",
    "You may not leave a team that you created.": "Kendi oluşturduğunuz bir ekipten ayrılamazsınız.",
    "Your email address is unverified.": "E-posta adresiniz doğrulanmadı."
}

================================================
FILE: resources/lang/zh_CN/actions.php
================================================
<?php

declare(strict_types=1);

return [
    'accept'          => '接受',
    'action'          => '行动',
    'actions'         => '行动',
    'add'             => '添加',
    'admin'           => '管理员',
    'agree'           => '同意',
    'archive'         => '档案',
    'assign'          => '分配',
    'associate'       => '联系',
    'attach'          => '附',
    'browse'          => '浏览',
    'cancel'          => '取消',
    'choose'          => '选择',
    'choose_file'     => '选择文件',
    'choose_image'    => '选择图片',
    'click_to_copy'   => '点击复制',
    'close'           => '关闭',
    'collapse'        => '收缩',
    'collapse_all'    => '全部收缩',
    'comment'         => '评论',
    'confirm'         => '确认',
    'connect'         => '连接',
    'create'          => '创建',
    'delete'          => '删除',
    'detach'          => '分离',
    'details'         => '细节',
    'disable'         => '禁用',
    'discard'         => '丢弃',
    'done'            => '完成',
    'down'            => '向下',
    'duplicate'       => '复制',
    'edit'            => '编辑',
    'enable'          => '启用',
    'expand'          => '展开',
    'expand_all'      => '展开全部',
    'explanation'     => '解释',
    'export'          => '导出',
    'file'            => '文件',
    'files'           => '文件',
    'go_home'         => '回家',
    'hide'            => '隐藏',
    'home'            => '家',
    'image'           => '图像',
    'impersonate'     => '模仿',
    'impersonation'   => '冒充',
    'import'          => '导入',
    'introduction'    => '介绍',
    'like'            => '喜欢',
    'load'            => '加载',
    'localize'        => '本地化',
    'log_in'          => '登录',
    'log_out'         => '登出',
    'named'           => [
        'add'       => '添加 :name',
        'choose'    => '选择:name',
        'create'    => '创建 :name 个',
        'delete'    => '删除 :name 个',
        'duplicate' => '重复：名称',
        'edit'      => '编辑:name',
        'export'    => '导出 :name',
        'hide'      => '隐藏 :name',
        'import'    => '导入 :name',
        'new'       => '新 :name',
        'restore'   => '恢复:name',
        'save'      => '保存 :name',
        'search'    => '搜索 :name',
        'show'      => '显示 :name',
        'update'    => '更新:name',
        'view'      => '查看 :name',
    ],
    'new'             => '新的',
    'no'              => '不',
    'open'            => '打开',
    'open_website'    => '在网站上打开',
    'preview'         => '预览',
    'price'           => '价格',
    'record'          => '记录',
    'restore'         => '恢复',
    'save'            => '保存',
    'save_and_close'  => '保存并关闭',
    'save_and_return' => '保存并返回',
    'search'          => '搜索',
    'select'          => '选择',
    'select_all'      => '全选',
    'send'            => '发送',
    'settings'        => '设置',
    'show'            => '显示',
    'show_all'        => '显示所有',
    'sign_in'         => '登入',
    'solve'           => '解决',
    'start'           => '开始',
    'stop'            => '停止',
    'submit'          => '提交',
    'subscribe'       => '订阅',
    'switch'          => '切换',
    'switch_to_role'  => '切换角色',
    'tag'             => '标签',
    'tags'            => '标签',
    'target_link'     => [
        'blank'  => '在新窗口中打开',
        'parent' => '在父框架中打开',
        'self'   => '在当前窗口中打开',
        'top'    => '在最上面的框架中打开',
    ],
    'translate'       => '翻译',
    'translate_it'    => '翻译它',
    'unpack'          => '打开',
    'unsubscribe'     => '退订',
    'up'              => '向上',
    'update'          => '更新',
    'user'            => '用户',
    'view'            => '查看',
    'yes'             => '是的',
];


================================================
FILE: resources/lang/zh_CN/auth.php
================================================
<?php

declare(strict_types=1);

return [
    'failed'   => '用户名或密码错误。',
    'password' => '密码错误',
    'throttle' => '您尝试的登录次数过多，请 :seconds 秒后再试。',
];


================================================
FILE: resources/lang/zh_CN/http-statuses.php
================================================
<?php

declare(strict_types=1);

return [
    '0'            => '未知错误',
    '100'          => '继续请求',
    '101'          => '切换协议',
    '102'          => '处理中',
    '200'          => '请求成功',
    '201'          => '已创建',
    '202'          => '已接受',
    '203'          => '非权威信息',
    '204'          => '无内容',
    '205'          => '重置内容',
    '206'          => '部分内容',
    '207'          => '多状态',
    '208'          => '已上报',
    '226'          => 'IM已使用',
    '300'          => '多种选择',
    '301'          => '已永久移动',
    '302'          => '临时移动',
    '303'          => '见其他',
    '304'          => '未修改',
    '305'          => '使用代理',
    '307'          => '临时重定向',
    '308'          => '永久重定向',
    '400'          => '请求错误',
    '401'          => '未授权',
    '402'          => '需要付款',
    '403'          => '禁止',
    '404'          => '未找到',
    '405'          => '方法不允许',
    '406'          => '无法接受',
    '407'          => '需要代理验证',
    '408'          => '请求超时',
    '409'          => '冲突',
    '410'          => '不可用',
    '411'          => '长度要求',
    '412'          => '前提条件未满足',
    '413'          => '请求实体过大',
    '414'          => 'URI太长了',
    '415'          => '不支持的媒体类型',
    '416'          => '请求范围不符合',
    '417'          => '期望不满足',
    '418'          => '我是一个茶壶',
    '419'          => '会话已过期',
    '421'          => '错误的请求',
    '422'          => '不可处理的实体',
    '423'          => '锁定',
    '424'          => '失败的依赖',
    '425'          => '太早了',
    '426'          => '需要升级',
    '428'          => '前提要求',
    '429'          => '请求太多',
    '431'          => '请求标头字段太大',
    '444'          => '连接关闭无响应',
    '449'          => '重试',
    '451'          => '法律原因不可用',
    '499'          => '客户端关闭请求',
    '500'          => '内部服务器错误',
    '501'          => '未实现',
    '502'          => '网关错误',
    '503'          => '服务不可用',
    '504'          => '网关超时',
    '505'          => 'HTTP版本不支持',
    '506'          => '变体协商',
    '507'          => '存储空间不足',
    '508'          => '检测到环路',
    '509'          => '超出带宽限制',
    '510'          => '未延期',
    '511'          => '需要网络验证',
    '520'          => '未知错误',
    '521'          => 'Web服务器已关闭',
    '522'          => '连接超时',
    '523'          => '原点无法到达',
    '524'          => '发生超时',
    '525'          => 'SSL握手失败',
    '526'          => '无效的SSL证书',
    '527'          => '轨道炮错误',
    '598'          => '网络读取超时',
    '599'          => '网络连接超时',
    'unknownError' => '未知错误',
];


================================================
FILE: resources/lang/zh_CN/pagination.php
================================================
<?php

declare(strict_types=1);

return [
    'next'     => '下一页 &raquo;',
    'previous' => '&laquo; 上一页',
];


================================================
FILE: resources/lang/zh_CN/passwords.php
================================================
<?php

declare(strict_types=1);

return [
    'reset'     => '密码重置成功！',
    'sent'      => '密码重置邮件已发送！',
    'throttled' => '请稍候再试。',
    'token'     => '密码重置令牌无效。',
    'user'      => '找不到该邮箱对应的用户。',
];


================================================
FILE: resources/lang/zh_CN/validation.php
================================================
<?php

declare(strict_types=1);

return [
    'accepted'             => '您必须接受 :attribute。',
    'accepted_if'          => '当 :other 为 :value 时，必须接受 :attribute。',
    'active_url'           => ':Attribute 不是一个有效的网址。',
    'after'                => ':Attribute 必须要晚于 :date。',
    'after_or_equal'       => ':Attribute 必须要等于 :date 或更晚。',
    'alpha'                => ':Attribute 只能由字母组成。',
    'alpha_dash'           => ':Attribute 只能由字母、数字、短划线(-)和下划线(_)组成。',
    'alpha_num'            => ':Attribute 只能由字母和数字组成。',
    'array'                => ':Attribute 必须是一个数组。',
    'ascii'                => ':Attribute 必须仅包含单字节字母数字字符和符号。',
    'attached'             => '这个 :attribute 已经连接。',
    'before'               => ':Attribute 必须要早于 :date。',
    'before_or_equal'      => ':Attribute 必须要等于 :date 或更早。',
    'between'              => [
        'array'   => ':Attribute 必须只有 :min - :max 个单元。',
        'file'    => ':Attribute 必须介于 :min - :max KB 之间。',
        'numeric' => ':Attribute 必须介于 :min - :max 之间。',
        'string'  => ':Attribute 必须介于 :min - :max 个字符之间。',
    ],
    'boolean'              => ':Attribute 必须为布尔值。',
    'can'                  => ':Attribute 字段包含未经授权的值。',
    'confirmed'            => ':Attribute 两次输入不一致。',
    'contains'             => 'The :attribute field is missing a required value.',
    'current_password'     => '密码错误。',
    'date'                 => ':Attribute 不是一个有效的日期。',
    'date_equals'          => ':Attribute 必须要等于 :date。',
    'date_format'          => ':Attribute 的格式必须为 :format。',
    'decimal'              => ':Attribute 必须有 :decimal 位小数。',
    'declined'             => ':Attribute 必须是拒绝的。',
    'declined_if'          => '当 :other 为 :value 时字段 :attribute 必须是拒绝的。',
    'different'            => ':Attribute 和 :other 必须不同。',
    'digits'               => ':Attribute 必须是 :digits 位数字。',
    'digits_between'       => ':Attribute 必须是介于 :min 和 :max 位的数字。',
    'dimensions'           => ':Attribute 图片尺寸不正确。',
    'distinct'             => ':Attribute 已经存在。',
    'doesnt_end_with'      => ':Attribute 不能以以下之一结尾: :values。',
    'doesnt_start_with'    => ':Attribute 不能以下列之一开头: :values。',
    'email'                => ':Attribute 不是一个合法的邮箱。',
    'ends_with'            => ':Attribute 必须以 :values 为结尾。',
    'enum'                 => ':Attribute 值不正确。',
    'exists'               => ':Attribute 不存在。',
    'extensions'           => ':attribute 字段必须具有以下扩展名之一：:values。',
    'file'                 => ':Attribute 必须是文件。',
    'filled'               => ':Attribute 不能为空。',
    'gt'                   => [
        'array'   => ':Attribute 必须多于 :value 个元素。',
        'file'    => ':Attribute 必须大于 :value KB。',
        'numeric' => ':Attribute 必须大于 :value。',
        'string'  => ':Attribute 必须多于 :value 个字符。',
    ],
    'gte'                  => [
        'array'   => ':Attribute 必须多于或等于 :value 个元素。',
        'file'    => ':Attribute 必须大于或等于 :value KB。',
        'numeric' => ':Attribute 必须大于或等于 :value。',
        'string'  => ':Attribute 必须多于或等于 :value 个字符。',
    ],
    'hex_color'            => ':attribute 字段必须是有效的十六进制颜色。',
    'image'                => ':Attribute 必须是图片。',
    'in'                   => '已选的属性 :attribute 无效。',
    'in_array'             => ':Attribute 必须在 :other 中。',
    'integer'              => ':Attribute 必须是整数。',
    'ip'                   => ':Attribute 必须是有效的 IP 地址。',
    'ipv4'                 => ':Attribute 必须是有效的 IPv4 地址。',
    'ipv6'                 => ':Attribute 必须是有效的 IPv6 地址。',
    'json'                 => ':Attribute 必须是正确的 JSON 格式。',
    'list'                 => ':attribute 字段必须是一个列表。',
    'lowercase'            => ':Attribute 必须小写。',
    'lt'                   => [
        'array'   => ':Attribute 必须少于 :value 个元素。',
        'file'    => ':Attribute 必须小于 :value KB。',
        'numeric' => ':Attribute 必须小于 :value。',
        'string'  => ':Attribute 必须少于 :value 个字符。',
    ],
    'lte'                  => [
        'array'   => ':Attribute 必须少于或等于 :value 个元素。',
        'file'    => ':Attribute 必须小于或等于 :value KB。',
        'numeric' => ':Attribute 必须小于或等于 :value。',
        'string'  => ':Attribute 必须少于或等于 :value 个字符。',
    ],
    'mac_address'          => ':Attribute 必须是一个有效的 MAC 地址。',
    'max'                  => [
        'array'   => ':Attribute 最多只有 :max 个单元。',
        'file'    => ':Attribute 不能大于 :max KB。',
        'numeric' => ':Attribute 不能大于 :max。',
        'string'  => ':Attribute 不能大于 :max 个字符。',
    ],
    'max_digits'           => ':Attribute 不能超过 :max 位数。',
    'mimes'                => ':Attribute 必须是一个 :values 类型的文件。',
    'mimetypes'            => ':Attribute 必须是一个 :values 类型的文件。',
    'min'                  => [
        'array'   => ':Attribute 至少有 :min 个单元。',
        'file'    => ':Attribute 大小不能小于 :min KB。',
        'numeric' => ':Attribute 必须大于等于 :min。',
        'string'  => ':Attribute 至少为 :min 个字符。',
    ],
    'min_digits'           => ':Attribute 必须至少有 :min 位数。',
    'missing'              => '必须缺少 :attribute 字段。',
    'missing_if'           => '当 :other 为 :value 时，必须缺少 :attribute 字段。',
    'missing_unless'       => '必须缺少 :attribute 字段，除非 :other 是 :value。',
    'missing_with'         => '存在 :values 时，必须缺少 :attribute 字段。',
    'missing_with_all'     => '存在 :values 时，必须缺少 :attribute 字段。',
    'multiple_of'          => ':Attribute 必须是 :value 中的多个值。',
    'not_in'               => '已选的属性 :attribute 非法。',
    'not_regex'            => ':Attribute 的格式错误。',
    'numeric'              => ':Attribute 必须是一个数字。',
    'password'             => [
        'letters'       => ':Attribute 必须至少包含一个字母。',
        'mixed'         => ':Attribute 必须至少包含一个大写字母和一个小写字母。',
        'numbers'       => ':Attribute 必须至少包含一个数字。',
        'symbols'       => ':Attribute 必须至少包含一个符号。',
        'uncompromised' => '给定的 :attribute 出现在已经泄漏的密码中。请选择不同的 :attribute。',
    ],
    'present'              => ':Attribute 必须存在。',
    'present_if'           => '当 :other 等于 :value 时，必须存在 :attribute 字段。',
    'present_unless'       => '除非 :other 等于 :value，否则 :attribute 字段必须存在。',
    'present_with'         => '当 :values 存在时，:attribute 字段必须存在。',
    'present_with_all'     => '当存在 :values 时，必须存在 :attribute 字段。',
    'prohibited'           => ':Attribute 字段被禁止。',
    'prohibited_if'        => '当 :other 为 :value 时，禁止 :attribute 字段。',
    'prohibited_unless'    => ':Attribute 字段被禁止，除非 :other 位于 :values 中。',
    'prohibits'            => ':Attribute 字段禁止出现 :other。',
    'regex'                => ':Attribute 格式不正确。',
    'relatable'            => '此 :attribute 可能与此资源不相关联。',
    'required'             => ':Attribute 不能为空。',
    'required_array_keys'  => ':Attribute 至少包含指定的键：:values.',
    'required_if'          => '当 :other 为 :value 时 :attribute 不能为空。',
    'required_if_accepted' => '当 :other 存在时，:attribute 不能为空。',
    'required_if_declined' => 'The :attribute field is required when :other is declined.',
    'required_unless'      => '当 :other 不为 :values 时 :attribute 不能为空。',
    'required_with'        => '当 :values 存在时 :attribute 不能为空。',
    'required_with_all'    => '当 :values 存在时 :attribute 不能为空。',
    'required_without'     => '当 :values 不存在时 :attribute 不能为空。',
    'required_without_all' => '当 :values 都不存在时 :attribute 不能为空。',
    'same'                 => ':Attribute 和 :other 必须相同。',
    'size'                 => [
        'array'   => ':Attribute 必须为 :size 个单元。',
        'file'    => ':Attribute 大小必须为 :size KB。',
        'numeric' => ':Attribute 大小必须为 :size。',
        'string'  => ':Attribute 必须是 :size 个字符。',
    ],
    'starts_with'          => ':Attribute 必须以 :values 为开头。',
    'string'               => ':Attribute 必须是一个字符串。',
    'timezone'             => ':Attribute 必须是一个合法的时区值。',
    'ulid'                 => ':Attribute 必须是有效的 ULID。',
    'unique'               => ':Attribute 已经存在。',
    'uploaded'             => ':Attribute 上传失败。',
    'uppercase'            => ':Attribute 必须大写',
    'url'                  => ':Attribute 格式不正确。',
    'uuid'                 => ':Attribute 必须是有效的 UUID。',
    'attributes'           => [
        'address'                  => '地址',
        'affiliate_url'            => '附属网址',
        'age'                      => '年龄',
        'amount'                   => '数额',
        'announcement'             => '公告',
        'area'                     => '区域',
        'audience_prize'           => '观众奖',
        'available'                => '可用的',
        'birthday'                 => '生日',
        'body'                     => '身体',
        'city'                     => '城市',
        'compilation'              => '汇编',
        'concept'                  => '概念',
        'conditions'               => '状况',
        'content'                  => '内容',
        'country'                  => '国家',
        'cover'                    => '覆盖',
        'created_at'               => '创建于',
        'creator'                  => '创建者',
        'currency'                 => '货币',
        'current_password'         => '当前密码',
        'customer'                 => '顾客',
        'date'                     => '日期',
        'date_of_birth'            => '出生日期',
        'dates'                    => '日期',
        'day'                      => '天',
        'deleted_at'               => '删除于',
        'description'              => '描述',
        'display_type'             => '显示类型',
        'district'                 => '地区',
        'duration'                 => '期间',
        'email'                    => '邮箱',
        'excerpt'                  => '摘要',
        'filter'                   => '过滤',
        'finished_at'              => '完成于',
        'first_name'               => '名',
        'gender'                   => '性别',
        'grand_prize'              => '大奖',
        'group'                    => '组',
        'hour'                     => '时',
        'image'                    => '图像',
        'image_desktop'            => '桌面图像',
        'image_main'               => '主图',
        'image_mobile'             => '移动图像',
        'images'                   => '图片',
        'is_audience_winner'       => '是观众赢家',
        'is_hidden'                => '被隐藏',
        'is_subscribed'            => '已订阅',
        'is_visible'               => '是可见的',
        'is_winner'                => '是赢家',
        'items'                    => '项目',
        'key'                      => '钥匙',
        'last_name'                => '姓',
        'lesson'                   => '课程',
        'line_address_1'           => '线路地址 1',
        'line_address_2'           => '线路地址 2',
        'login'                    => '登录',
        'message'                  => '信息',
        'middle_name'              => '中间名字',
        'minute'                   => '分',
        'mobile'                   => '手机',
        'month'                    => '月',
        'name'                     => '名称',
        'national_code'            => '国家代码',
        'number'                   => '数字',
        'password'                 => '密码',
        'password_confirmation'    => '确认密码',
        'phone'                    => '电话',
        'photo'                    => '照片',
        'portfolio'                => '文件夹',
        'postal_code'              => '邮政编码',
        'preview'                  => '预览',
        'price'                    => '价格',
        'product_id'               => '产品编号',
        'product_uid'              => '产品UID',
        'product_uuid'             => '产品UUID',
        'promo_code'               => '促销代码',
        'province'                 => '省',
        'quantity'                 => '数量',
        'reason'                   => '原因',
        'recaptcha_response_field' => '重复验证码响应字段',
        'referee'                  => '裁判',
        'referees'                 => '裁判员',
        'reject_reason'            => '拒绝理由',
        'remember'                 => '记住',
        'restored_at'              => '恢复于',
        'result_text_under_image'  => '图像下的结果文本',
        'role'                     => '角色',
        'rule'                     => '规则',
        'rules'                    => '规则',
        'second'                   => '秒',
        'sex'                      => '性别',
        'shipment'                 => '运输',
        'short_text'               => '短文本',
        'size'                     => '大小',
        'skills'                   => '技能',
        'slug'                     => '蛞蝓',
        'specialization'           => '专业化',
        'started_at'               => '开始于',
        'state'                    => '状态',
        'status'                   => '地位',
        'street'                   => '街道',
        'student'                  => '学生',
        'subject'                  => '主题',
        'tag'                      => '标签',
        'tags'                     => '标签',
        'teacher'                  => '教师',
        'terms'                    => '条款',
        'test_description'         => '测试说明',
        'test_locale'              => '测试语言环境',
        'test_name'                => '测试名称',
        'text'                     => '文本',
        'time'                     => '时间',
        'title'                    => '标题',
        'type'                     => '类型',
        'updated_at'               => '更新于',
        'user'                     => '用户',
        'username'                 => '用户名',
        'value'                    => '价值',
        'year'                     => '年',
    ],
];


================================================
FILE: resources/lang/zh_CN.json
================================================
{
    "(and :count more error)": "(还有 :count 个错误)",
    "(and :count more errors)": "(还有 :count 个错误)|(以及另外 :count 个错误)|(以及另外 :count 个错误)",
    "A new verification link has been sent to the email address you provided in your profile settings.": "一个新的验证链接已被发送到你在个人资料设置中提供的电子邮件地址。",
    "A new verification link has been sent to your email address.": "一个新的验证链接已经发送到你的电子邮件地址。",
    "A Timeout Occurred": "发生超时",
    "Accept": "接受",
    "Accept Invitation": "接受邀请",
    "Accepted": "已接受",
    "Action": "操作",
    "Actions": "操作",
    "Add": "添加",
    "Add :name": "添加 :name",
    "Add a new team member to your team, allowing them to collaborate with you.": "添加一个新的团队成员到您的团队，让他们与您合作。",
    "Add additional security to your account using two factor authentication.": "使用双因素认证为您的账户添加额外的安全性。",
    "Add Team Member": "添加团队成员",
    "Added.": "已添加。",
    "Admin": "管理员",
    "Administrator": "管理员",
    "Administrator users can perform any action.": "管理员用户可以执行任何操作。",
    "Agree": "同意",
    "All of the people that are part of this team.": "所有的人都是这个团队的一部分。",
    "All rights reserved.": "版权所有。",
    "Already registered?": "已注册？",
    "Already Reported": "已上报",
    "API Token": "API 令牌",
    "API Token Permissions": "API 令牌权限",
    "API Tokens": "API 令牌",
    "API tokens allow third-party services to authenticate with our application on your behalf.": "API 令牌允许第三方服务代表您与我们的应用程序进行认证。",
    "Archive": "档案",
    "Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.": "您确定要删除这个团队吗？一旦一个团队被删除，它的所有资源和数据将被永久删除。",
    "Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.": "您确定要删除您的账户吗？一旦您的账户被删除，其所有资源和数据将被永久删除。请输入您的密码，确认您要永久删除您的账户。",
    "Are you sure you would like to delete this API token?": "您确定要删除这个 API 令牌吗？",
    "Are you sure you would like to leave this team?": "您确定要离开这个团队吗？",
    "Are you sure you would like to remove this person from the team?": "您确定要把这个人从团队中删除吗？",
    "Assign": "分配",
    "Associate": "联系",
    "Attach": "附加",
    "Bad Gateway": "网关错误",
    "Bad Request": "请求错误",
    "Bandwidth Limit Exceeded": "超出带宽限制",
    "Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.": "在继续之前，你能否点击我们刚才发给你的链接来验证你的电子邮件地址？如果你没有收到邮件，我们很乐意再给你发一封。",
    "Browse": "浏览",
    "Browser Sessions": "浏览器会话",
    "Cancel": "取消",
    "Choose": "选择",
    "Choose :name": "选择:name",
    "Choose File": "选择文件",
    "Choose Image": "选择图片",
    "Click here to re-send the verification email.": "点击这里重新发送验证邮件。",
    "Click to copy": "点击复制",
    "Client Closed Request": "客户端关闭请求",
    "Close": "关闭",
    "Code": "验证码",
    "Collapse": "收缩",
    "Collapse All": "全部收缩",
    "Comment": "评论",
    "Confirm": "确认",
    "Confirm Password": "确认密码",
    "Conflict": "冲突",
    "Connect": "连接",
    "Connection Closed Without Response": "连接关闭无响应",
    "Connection Timed Out": "连接超时",
    "Continue": "继续请求",
    "Create": "创建",
    "Create :name": "创建 :name 个",
    "Create a new team to collaborate with others on projects.": "创建一个新的团队，与他人合作开展项目。",
    "Create Account": "创建账户",
    "Create API Token": "创建 API 令牌",
    "Create New Team": "创建新的团队",
    "Create Team": "创建团队",
    "Created": "已创建",
    "Created.": "已创建。",
    "Current Password": "当前密码",
    "Dashboard": "控制面板",
    "Delete": "删除",
    "Delete :name": "删除 :name 个",
    "Delete Account": "删除账户",
    "Delete API Token": "删除 API 令牌",
    "Delete Team": "删除团队",
    "Detach": "分离",
    "Details": "详情",
    "Disable": "禁用",
    "Discard": "丢弃",
    "Done": "完成",
    "Done.": "已完成。",
    "Down": "向下",
    "Duplicate": "复制",
    "Duplicate :name": "重复：名称",
    "Edit": "编辑",
    "Edit :name": "编辑:name",
    "Edit Profile": "编辑资料",
    "Editor": "编辑者",
    "Editor users have the ability to read, create, and update.": "编辑者可以阅读、创建和更新。",
    "Email": "电子邮箱",
    "Email Password Reset Link": "电子邮件密码重置链接",
    "Enable": "启用",
    "Ensure your account is using a long, random password to stay secure.": "确保您的账户使用足够长且随机的密码来保证安全。",
    "errors": "错误",
    "Expand": "展开",
    "Expand All": "展开全部",
    "Expectation Failed": "期望不满足",
    "Explanation": "解释",
    "Export": "导出",
    "Export :name": "导出 :name",
    "Failed Dependency": "失败的依赖",
    "File": "文件",
    "Files": "文件",
    "Finish enabling two factor authentication.": "完成启用双因素认证。",
    "For your security, please confirm your password to continue.": "为了您的安全，请确认您的密码以继续。",
    "Forbidden": "访问被拒绝",
    "Forgot your password?": "忘记密码？",
    "Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.": "忘记密码？没关系。输入您的电子邮件地址，我们将通过电子邮件向您发送密码重置链接，让您重置一个新的密码。",
    "Found": "临时移动",
    "Gateway Timeout": "网关超时",
    "Go Home": "回首页",
    "Go to page :page": "前往第 :page 页",
    "Gone": "不可用",
    "Great! You have accepted the invitation to join the :team team.": "太好了，您已接受了加入团队「:team」的邀请。",
    "Hello!": "您好！",
    "Hide": "隐藏",
    "Hide :name": "隐藏 :name",
    "Home": "家",
    "HTTP Version Not Supported": "HTTP版本不支持",
    "I agree to the :terms_of_service and :privacy_policy": "我同意 :terms_of_service 和 :privacy_policy",
    "I'm a teapot": "我是一个茶壶",
    "If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.": "如有必要，您可以注销您其他设备上所有的浏览器会话。下面列出了您最近的一些会话，但是，这个列表可能并不详尽。如果您认为您的账户已被入侵，您还应该更新您的密码。",
    "If you already have an account, you may accept this invitation by clicking the button below:": "如果您已经有一个账户，您可以通过点击下面的按钮接受这个邀请：",
    "If you did not create an account, no further action is required.": "如果您未注册帐号，请忽略此邮件。",
    "If you did not expect to receive an invitation to this team, you may discard this email.": "如果您没有想到会收到这个团队的邀请，您可以丢弃这封邮件。",
    "If you did not request a password reset, no further action is required.": "如果您未申请重设密码，请忽略此邮件。",
    "If you do not have an account, you may create one by clicking the button below. After creating an account, you may click the invitation acceptance button in this email to accept the team invitation:": "如果您还没有账号，可以点击下面的按钮创建一个账号。创建账户后，您可以点击此邮件中的邀请接受按钮，接受团队邀请：",
    "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "如果您单击「:actionText」按钮时遇到问题，请复制下方链接到浏览器中访问：",
    "IM Used": "IM已使用",
    "Image": "图像",
    "Impersonate": "模拟登录",
    "Impersonation": "冒充",
    "Import": "导入",
    "Import :name": "导入 :name",
    "Insufficient Storage": "存储空间不足",
    "Internal Server Error": "内部服务器错误",
    "Introduction": "介绍",
    "Invalid JSON was returned from the route.": "从路由返回无效的 JSON。",
    "Invalid SSL Certificate": "无效的SSL证书",
    "Last active": "上次活跃",
    "Last used": "上次使用",
    "Leave": "离开",
    "Leave Team": "离开团队",
    "length": "length",
    "Length Required": "长度要求",
    "Like": "喜欢",
    "Load": "加载",
    "Localize": "本地化",
    "Location": "地点",
    "Locked": "锁定",
    "Log In": "登录",
    "Log in": "登录",
    "Log Out": "登出",
    "Log Out Other Browser Sessions": "注销其他浏览器的会话",
    "Login": "登录",
    "Logout": "登出",
    "Loop Detected": "检测到环路",
    "Maintenance Mode": "服务不可用",
    "Manage Account": "管理账户",
    "Manage and log out your active sessions on other browsers and devices.": "管理和注销您在其他浏览器和设备上的活动会话。",
    "Manage API Tokens": "管理 API 令牌",
    "Manage Role": "管理角色",
    "Manage Team": "管理团队",
    "Method Not Allowed": "方法不允许",
    "Misdirected Request": "错误的请求",
    "Moved Permanently": "已永久移动",
    "Multi-Status": "多状态",
    "Multiple Choices": "多种选择",
    "Name": "姓名",
    "Network Authentication Required": "需要网络验证",
    "Network Connect Timeout Error": "网络连接超时",
    "Network Read Timeout Error": "网络读取超时",
    "New": "新建",
    "New :name": "新 :name",
    "New Password": "新的密码",
    "No": "不",
    "No Content": "无内容",
    "Non-Authoritative Information": "非权威信息",
    "Not Acceptable": "无法接受",
    "Not Extended": "未延期",
    "Not Found": "页面不存在",
    "Not Implemented": "未实现",
    "Not Modified": "未修改",
    "of": "于",
    "OK": "请求成功",
    "Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.": "一旦团队被删除，其所有资源和数据将被永久删除。在删除该团队之前，请下载您希望保留的有关该团队的任何数据或信息。",
    "Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.": "一旦您的账户被删除，其所有资源和数据将被永久删除。在删除您的账户之前，请下载您希望保留的任何数据或信息。",
    "Open": "打开",
    "Open in a current window": "在当前窗口中打开",
    "Open in a new window": "在新窗口中打开",
    "Open in a parent frame": "在父框架中打开",
    "Open in the topmost frame": "在最上面的框架中打开",
    "Open on the website": "在网站上打开",
    "Origin Is Unreachable": "原点无法到达",
    "Page Expired": "页面会话已超时",
    "Pagination Navigation": "分页导航",
    "Partial Content": "部分内容",
    "Password": "密码",
    "Payload Too Large": "请求实体过大",
    "Payment Required": "需要付款",
    "Pending Team Invitations": "待处理的团队邀请函",
    "Permanent Redirect": "永久重定向",
    "Permanently delete this team.": "永久删除此团队",
    "Permanently delete your account.": "永久删除您的账户",
    "Permissions": "权限",
    "Photo": "照片",
    "Please click the button below to verify your email address.": "请点击下面按钮验证您的 E-mail：",
    "Please confirm access to your account by entering one of your emergency recovery codes.": "请输入您的紧急恢复代码以访问您的账户。",
    "Please confirm access to your account by entering the authentication code provided by your authenticator application.": "请输入您的验证器应用程序提供的验证码以访问您的账户。",
    "Please copy your new API token. For your security, it won't be shown again.": "请复制您的新 API 令牌。为了您的安全，它不会再被显示出来。",
    "Please enter your password to confirm you would like to log out of your other browser sessions across all of your devices.": "请输入您的密码，以确认您要注销您其他设备上的浏览器会话。",
    "Please provide the email address of the person you would like to add to this team.": "请提供您想加入这个团队的人的电子邮件地址。",
    "Precondition Failed": "前提条件未满足",
    "Precondition Required": "前提要求",
    "Preview": "预览",
    "Price": "价格",
    "Privacy Policy": "隐私政策",
    "Processing": "处理中",
    "Profile": "资料",
    "Profile Information": "账户资料",
    "Proxy Authentication Required": "需要代理验证",
    "Railgun Error": "轨道炮错误",
    "Range Not Satisfiable": "请求范围不符合",
    "Record": "记录",
    "Recovery Code": "恢复代码",
    "Regards": "致敬",
    "Regenerate Recovery Codes": "重新生成恢复码",
    "Register": "注册",
    "Remember me": "记住我",
    "Remove": "移除",
    "Remove Photo": "移除照片",
    "Remove Team Member": "移除团队成员",
    "Request Header Fields Too Large": "请求标头字段太大",
    "Request Timeout": "请求超时",
    "Resend Verification Email": "重新发送验证邮件",
    "Reset Content": "重置内容",
    "Reset Password": "重置密码",
    "Reset Password Notification": "重置密码通知",
    "Restore": "恢复",
    "Restore :name": "恢复:name",
    "results": "结果",
    "Retry With": "重试",
    "Role": "角色",
    "Save": "保存",
    "Save & Close": "保存并关闭",
    "Save & Return": "保存并返回",
    "Save :name": "保存 :name",
    "Saved.": "已保存。",
    "Search": "搜索",
    "Search :name": "搜索 :name",
    "See Other": "见其他",
    "Select": "选择",
    "Select A New Photo": "选择新的照片",
    "Select All": "全选",
    "Send": "发送",
    "Server Error": "服务器错误",
    "Service Unavailable": "服务不可用",
    "Session Has Expired": "会话已过期",
    "Settings": "设置",
    "Setup Key": "设定键",
    "Show": "显示",
    "Show :name": "显示 :name",
    "Show All": "显示所有",
    "Show Recovery Codes": "显示恢复代码",
    "Showing": "显示中",
    "Sign In": "登入",
    "Solve": "解决",
    "SSL Handshake Failed": "SSL握手失败",
    "Start": "开始",
    "Stop": "停止",
    "Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.": "将这些恢复码存储在一个安全的密码管理器中。如果您的双因素验证设备丢失，它们可以用来恢复对您账户的访问。",
    "Submit": "提交",
    "Subscribe": "订阅",
    "Switch": "切换",
    "Switch Teams": "切换团队",
    "Switch To Role": "切换角色",
    "Switching Protocols": "切换协议",
    "Tag": "标签",
    "Tags": "标签",
    "Team Details": "团队详情",
    "Team Invitation": "团队邀请",
    "Team Members": "团队成员",
    "Team Name": "团队名称",
    "Team Owner": "团队拥有者",
    "Team Settings": "团队设置",
    "Temporary Redirect": "临时重定向",
    "Terms of Service": "服务条款",
    "The :attribute must be a valid role.": ":Attribute 必须是一个有效的角色。",
    "The :attribute must be at least :length characters and contain at least one number.": ":Attribute 至少为 :length 个字符且至少包含一个数字。",
    "The :attribute must be at least :length characters and contain at least one special character and one number.": ":Attribute 长度至少 :length 位并且至少必须包含一个特殊字符和一个数字。",
    "The :attribute must be at least :length characters and contain at least one special character.": ":Attribute 至少为 :length 个字符且至少包含一个特殊字符。",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one number.": ":Attribute 至少为 :length 个字符且至少包含一个大写字母和一个数字。",
    "The :attribute must be at least :length characters and contain at least one uppercase character and one special character.": ":Attribute 至少为 :length 个字符且至少包含一个大写字母和一个特殊字符。",
    "The :attribute must be at least :length characters and contain at least one uppercase character, one number, and one special character.": ":Attribute 至少为 :length 个字符且至少包含一个大写字母、一个数字和一个特殊字符。",
    "The :attribute must be at least :length characters and contain at least one uppercase character.": ":Attribute 至少为 :length 个字符且至少包含一个大写字母。",
    "The :attribute must be at least :length characters.": ":Attribute 至少为 :length 个字符。",
    "The given data was invalid.": "给定的数据无效。",
    "The password is incorrect.": "密码不正确。",
    "The provided password does not match your current password.": "当前密码不正确",
    "The provided password was incorrect.": "密码错误",
    "The provided two factor authentication code was invalid.": "双因素认证代码错误",
    "The provided two factor recovery code was invalid.": "双因素恢复代码无效。",
    "The response is not a streamed response.": "该响应不是流式响应。",
    "The response is not a view.": "响应不是视图。",
    "The team's name and owner information.": "团队名称和拥有者信息。",
    "These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.": "这些人已被邀请加入您的团队，并已收到一封邀请邮件。他们可以通过接受电子邮件邀请加入团队。",
    "This action is unauthorized.": "此操作未经授权。",
    "This device": "当前设备",
    "This is a secure area of the application. Please confirm your password before continuing.": "请在继续之前确认您的密码。",
    "This password does not match our records.": "密码不正确",
    "This password reset link will expire in :count minutes.": "这个重设密码链接将会在 :count 分钟后失效。",
    "This user already belongs to the team.": "此用户已经在团队中",
    "This user has already been invited to the team.": "该用户已经被邀请加入团队。",
    "to": "至",
    "To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.": "完成启用双因素认证，使用手机的认证应用程序扫描以下二维码，或者输入设置密钥并提供生成的 OTP 密码。",
    "Toggle navigation": "切换导航",
    "Token Name": "令牌名称",
    "Too Early": "太早了",
    "Too Many Requests": "请求次数过多。",
    "Translate": "翻译",
    "Translate It": "翻译它",
    "Two Factor Authentication": "双因素认证",
    "Two factor authentication is now enabled. Scan the following QR code using your phone's authenticator application or enter the setup key.": "双因素认证已启用。使用手机的认证应用程序扫描以下二维码，或者输入设置密钥。",
    "Unauthorized": "未授权",
    "Unavailable For Legal Reasons": "法律原因不可用",
    "Unknown": "未知",
    "Unknown Error": "未知错误",
    "Unpack": "打开",
    "Unprocessable Entity": "不可处理的实体",
    "Unsubscribe": "退订",
    "Unsupported Media Type": "不支持的媒体类型",
    "Up": "向上",
    "Update": "更新",
    "Update :name": "更新:name",
    "Update Password": "更新密码",
    "Update your account's profile information and email address.": "更新您的账户资料和电子邮件地址。",
    "Upgrade Required": "需要升级",
    "URI Too Long": "URI太长了",
    "Use a recovery code": "使用恢复码",
    "Use an authentication code": "使用验证码",
    "Use Proxy": "使用代理",
    "User": "用户",
    "Variant Also Negotiates": "变体协商",
    "Verify Email Address": "验证 E-mail",
    "View": "查看",
    "View :name": "查看 :name",
    "We were unable to find a registered user with this email address.": "我们无法找到这个电子邮件地址的注册用户。",
    "Web Server is Down": "Web服务器已关闭",
    "When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.": "当启用双因素认证时，在认证过程中会提示您输入一个安全的随机令牌。您可以从手机的 Google Authenticator 应用程序中获取此令牌。",
    "Whoops!": "哎呀！",
    "Whoops! Something went wrong.": "哎呀！出了点问题",
    "Yes": "是的",
    "You are receiving this email because we received a password reset request for your account.": "您收到此电子邮件是因为我们收到了您帐户的密码重设请求。",
    "You have been invited to join the :team team!": "您已被邀请加入「:team」团队!",
    "You have enabled two factor authentication.": "您已经启用了双因素认证。",
    "You have not enabled two factor authentication.": "您还没有启用双因素认证。",
    "You may accept this invitation by clicking the button below:": "您可以点击下面的按钮接受此邀请：",
    "You may delete any of your existing tokens if they are no longer needed.": "如果不再需要，您可以删除任何现有的令牌。",
    "You may not delete your personal team.": "您不能删除您的个人团队。",
    "You may not leave a team that you created.": "您不能离开您创建的团队。",
    "Your email address is unverified.": "您的电子邮箱未经验证。"
}

================================================
FILE: resources/markdown/policy.md
================================================
# Privacy Policy

Edit this file to define the privacy policy for your application.


================================================
FILE: resources/markdown/terms.md
================================================
# Terms of Service

Edit this file to define the terms of service for your application.


================================================
FILE: resources/sass/app.scss
================================================


================================================
FILE: resources/views/app.blade.php
================================================
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'TailAdmin') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        @routes
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>


================================================
FILE: resources/views/emails/team-invitation.blade.php
================================================
@component('mail::message')
{{ __('You have been invited to join the :team team!', ['team' => $invitation->team->name]) }}

@if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::registration()))
{{ __('If you do not have an account, you may create one by clicking the button below. After creating an account, you may click the invitation acceptance button in this email to accept the team invitation:') }}

@component('mail::button', ['url' => route('register')])
{{ __('Create Account') }}
@endcomponent

{{ __('If you already have an account, you may accept this invitation by clicking the button below:') }}

@else
{{ __('You may accept this invitation by clicking the button below:') }}
@endif


@component('mail::button', ['url' => $acceptUrl])
{{ __('Accept Invitation') }}
@endcomponent

{{ __('If you did not expect to receive an invitation to this team, you may discard this email.') }}
@endcomponent


================================================
FILE: routes/api.php
================================================
<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::get('/user', function (Request $request) {
    return $request->user();
})->middleware('auth:sanctum');


================================================
FILE: routes/console.php
================================================
<?php

use Illuminate\Foundation\Inspiring;
use Illuminate\Support\Facades\Artisan;

Artisan::command('inspire', function () {
    $this->comment(Inspiring::quote());
})->purpose('Display an inspiring quote')->hourly();


================================================
FILE: routes/web.php
================================================
<?php

use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use Spatie\Permission\Models\Permission;
use Spatie\Permission\Models\Role;


/**
 * You can register your routes here.
**/
include base_path('routes/web_modules/index.php');

/* Change Lang */
Route::get('lang/{locale}', function ($locale) {
    // Available languages
    $availableLangs = [
        'en' => 'en',
        'bg' => 'bg',
        'de' => 'de',
        'fr' => 'fr',
        'ru' => 'ru',
        'tr' => 'tr',
        'zh' => 'zh',
    ];
    if (array_key_exists($locale, $availableLangs)) {
        session()->put('locale', $locale);
    }
    return redirect()->back();


})->name('lang');
Route::middleware([
    'auth:sanctum',
    config('jetstream.auth_session'),
    'verified',
])->group(function () {
    Route::get('/', function () {
        return Inertia::render('Dashboard', [
            'canLogin' => Route::has('login'),
            'canRegister' => Route::has('register'),
            'laravelVersion' => Application::VERSION,
            'phpVersion' => PHP_VERSION,
        ]);
    })->name('/');


    /*They are the required pages for the system, don't delete it*/
    Route::prefix('settings')->group(function () {

        /*Settings Summary*/
        Route::get('/', function () {
            return Inertia::render('Settings/Index', [
                'users_count' => count(\App\Models\User::all('id')),
                'roles_count' => count(Role::all()),
                'permissions_count' => count(Permission::all())
            ]);
        })->name('settings');

        /*Get Routes*/
        Route::get('system', function () {
            return Inertia::render('Settings/System');
        })->name('settings-system');

        /*Resource Routes*/
        Route::resources([
            'settings-user'=> \App\Http\Controllers\Settings\UserController::class,
            'settings-role' => \App\Http\Controllers\Settings\RoleController::class,
            'settings-permission' => \App\Http\Controllers\Settings\PermissionController::class
        ]);

        /*Search Routes for Resource Routes*/
        Route::post('settings-user', [\App\Http\Controllers\Settings\UserController::class, 'index'])->name('settings-user.search');
        Route::post('settings-role', [\App\Http\Controllers\Settings\RoleController::class, 'index'])->name('settings-role.search');
        Route::post('settings-permission', [\App\Http\Controllers\Settings\PermissionController::class, 'index'])->name('settings-permission.search');

    });

    /*This pages for example, you can delete when you design the your system*/
    //Example Pages
    Route::get('login-app', function () {
        return Inertia::render('Samples/Examples/Login');
    })->name('login-app');
    Route::get('login-app-demo', function () {
        return Inertia::render('Samples/Examples/Auth/Login');
    })->name('login-app-demo');
    Route::get('register-app', function () {
        return Inertia::render('Samples/Examples/Register');
    })->name('register-app');
    Route::get('register-app-demo', function () {
        return Inertia::render('Samples/Examples/Auth/Register');
    })->name('register-app-demo');;
    Route::get('forgot-password-app', function () {
        return Inertia::render('Samples/Examples/ForgotPassword');
    })->name('forgot-password-app');
    Route::get('forgot-password-app-demo', function () {
        return Inertia::render('Samples/Examples/Auth/ForgotPassword');
    })->name('forgot-password-app-demo');
    Route::get('lock-app', function () {
        return Inertia::render('Samples/Examples/Lock');
    })->name('lock-app');
    Route::get('lock-app-demo', function () {
        return Inertia::render('Samples/Examples/Auth/Lock');
    })->name('lock-app-demo');
    Route::get('profile', function () {
        return Inertia::render('Samples/Examples/Profile');
    })->name('profile');
    Route::get('pricing', function () {
        return Inertia::render('Samples/Examples/Pricing');
    })->name('pricing');
    Route::get('project-management-app', function () {
        return Inertia::render('Samples/Examples/ProjectApp');
    })->name('project-management-app');
    Route::get('todo-app', function () {
        return Inertia::render('Samples/Examples/TodoApp');
    })->name('todo-app');
    Route::get('email-app', function () {
        return Inertia::render('Samples/Examples/EmailApp');
    })->name('email-app');
    Route::get('chat-app', function () {
        return Inertia::render('Samples/Examples/ChatApp');
    })->name('chat-app');
    //Component Pages
    Route::get('alert', function () {
        return Inertia::render('Samples/Components/Alert');
    })->name('alert');
    Route::get('avatar', function () {
        return Inertia::render('Samples/Components/Avatar');
    })->name('avatar');
    Route::get('badge', function () {
        return Inertia::render('Samples/Components/Badge');
    })->name('badge');
    Route::get('breadcrumb', function () {
        return Inertia::render('Samples/Components/Breadcrumb');
    })->name('breadcrumb');
    Route::get('button', function () {
        return Inertia::render('Samples/Components/Button');
    })->name('button');
    Route::get('chart', function () {
        return Inertia::render('Samples/Components/Chart');
    })->name('chart');
    Route::get('collapsible', function () {
        return Inertia::render('Samples/Components/Collapsible');
    })->name('collapsible');
    Route::get('content-box', function () {
        return Inertia::render('Samples/Component/ContentBox');
    })->name('content-box');
    Route::get('dropdown', function () {
        return Inertia::render('Samples/Components/Dropdown');
    })->name('dropdown');
    Route::get('list', function () {
        return Inertia::render('Samples/Components/List');
    })->name('list');
    Route::get('loading', function () {
        return Inertia::render('Samples/Components/Loading');
    })->name('loading');
    Route::get('modal', function () {
        return Inertia::render('Samples/Components/Modal');
    })->name('modal');
    Route::get('pagination', function () {
        return Inertia::render('Samples/Components/Paginate');
    })->name('pagination');
    Route::get('progress', function () {
        return Inertia::render('Samples/Components/Progress');
    })->name('progress');
    Route::get('tab', function () {
        return Inertia::render('Samples/Components/Tab');
    })->name('tab');
    Route::get('table', function () {
        return Inertia::render('Samples/Components/Table', [
            'users' => \App\Models\User::all()
        ]);
    })->name('table');
    Route::match(['get', 'post'], 'back-end-table', [\App\Http\Controllers\DemoContentController::class, 'index'])->name('back-end-table');

    Route::resource('product', \App\Http\Controllers\DemoContentController::class);
    Route::post('product', [\App\Http\Controllers\DemoContentController::class, 'index'])->name('product.search');

    /*TODO: Toastr Feature
    Route::get('toastr',function (){return Inertia::render('Samples/Components/Toastr');})->name('toastr');*/
    Route::get('tooltip', function () {
        return Inertia::render('Samples/Components/Tooltip');
    })->name('tooltip');
    // Layout Pages
    Route::get('layout-structure', function () {
        return Inertia::render('Samples/Layouts/LayoutStructure');
    })->name('layout-structure');
    Route::get('layout-grid', function () {
        return Inertia::render('Samples/Layouts/Grid');
    })->name('layout-grid');
    Route::get('layout-statistic-widget', function () {
        return Inertia::render('Samples/Layouts/StatisticWidget');
    })->name('layout-statistic-widget');
    Route::get('test', function () {
        return Inertia::render('Samples/Test');
    })->name('test');
    // Form Pages
    Route::get('form-structure', function () {
        return Inertia::render('Samples/FormElements/FormStructure');
    })->name('form-structure');
    Route::get('form-input-group', function () {
        return Inertia::render('Samples/FormElements/InputGroup');
    })->name('form-input-group');
    Route::get('form-simple-field', function () {
        return Inertia::render('Samples/FormElements/SimpleField');
    })->name('form-simple-field');
    Route::get('form-repeatable-field', function () {
        return Inertia::render('Samples/FormElements/RepeatableField');
    })->name('form-repeatable-field');
    Route::get('form-date-field', function () {
        return Inertia::render('Samples/FormElements/DateField');
    })->name('form-date-field');
    Route::get('form-select-input', function () {
        return Inertia::render('Samples/FormElements/SelectInput', [
            'users' => \App\Models\User::all()
        ]);
    })->name('form-select-input');
    Route::get('form-tag-input', function () {
        return Inertia::render('Samples/FormElements/TagInput');
    })->name('form-tag-input');
    Route::get('form-validation', function () {
        return Inertia::render('Samples/FormElements/Validation');
    })->name('form-validation');
});





================================================
FILE: routes/web_modules/auth/index.php
================================================
<?php
/**
 * You can register your routes here.
 **/

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('terms', function () {
    return Inertia::render('TermsOfService');
})->name('terms.show');

Route::get('privacy-policy', function () {
    return Inertia::render('PrivacyPolicy');
})->name('privacy-policy.show');


================================================
FILE: routes/web_modules/index.php
================================================
<?php

/**
 * You can register your routes here.
**/

include base_path('routes/web_modules/user/index.php');
include base_path('routes/web_modules/auth/index.php');


================================================
FILE: routes/web_modules/user/index.php
================================================
<?php
/**
 * You can register your routes here.
 **/

use Illuminate\Support\Facades\Route;

Route::middleware([
    'auth:sanctum',
    config('jetstream.auth_session'),
    'verified',
])->prefix('user/')->name('user.')->group([
    base_path('routes/web_modules/user/preferences_routes.php')
]);


================================================
FILE: routes/web_modules/user/preferences_routes.php
================================================
<?php

use App\Actions\TailAdmin\UpdateDarkModePreference;
use App\Actions\TailAdmin\UpdateUserLanguage;
use Illuminate\Support\Facades\Route;

Route::put('preferred-language', [UpdateUserLanguage::class, 'update'])->name('preferred-language.update');
Route::put('dark-mode', [UpdateDarkModePreference::class, 'update'])->name('dark-mode-preference.update');


================================================
FILE: storage/app/.gitignore
================================================
*
!private/
!public/
!.gitignore


================================================
FILE: storage/debugbar/.gitignore
================================================
*
!.gitignore


================================================
FILE: storage/framework/.gitignore
================================================
compiled.php
config.php
down
events.scanned.php
maintenance.php
routes.php
routes.scanned.php
schedule-*
services.json


================================================
FILE: storage/framework/cache/.gitignore
================================================
*
!data/
!.gitignore


================================================
FILE: storage/framework/data/.gitignore
================================================
*
!.gitignore


================================================
FILE: storage/framework/sessions/.gitignore
================================================
*
!.gitignore


================================================
FILE: storage/framework/testing/.gitignore
================================================
*
!.gitignore


================================================
FILE: storage/framework/views/.gitignore
================================================
*
!.gitignore


================================================
FILE: storage/logs/.gitignore
================================================
*
!.gitignore


================================================
FILE: tailwind.config.js
================================================
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import scrollbar from "tailwind-scrollbar"

/** @type {import('tailwindcss').Config} */
export default {
    darkMode: 'selector',

    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.{js,ts,json,vue}',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
            fontSize: {
                '2xs': '.65rem',
            },
        },
    },

    variants: {
        extend: {
            /*opacity: ['disabled'],
            scale: ['active'],
            textColor: ['hover', 'active'],
            backgroundColor: ['active','odd','even'],
            fontWeight: ['hover', 'active', 'focus'],
            borderWidth: ['first', 'last', 'hover'],
            borderRadius: ['first', 'last'],
            boxShadow: ['dark'],
            padding: ['focus', 'hover'],
            zIndex: ['hover'],
            brightness: ['hover', 'focus']*/
        },
        scrollbar: ['dark']
    },

    plugins: [forms, typography, scrollbar],
};


================================================
FILE: tests/Feature/ApiTokenPermissionsTest.php
================================================
<?php

use App\Models\User;
use Illuminate\Support\Str;
use Laravel\Jetstream\Features;

test('api token permissions can be updated', function () {
    if (Features::hasTeamFeatures()) {
        $this->actingAs($user = User::factory()->withPersonalTeam()->create());
    } else {
        $this->actingAs($user = User::factory()->create());
    }

    $token = $user->tokens()->create([
        'name' => 'Test Token',
        'token' => Str::random(40),
        'abilities' => ['create', 'read'],
    ]);

    $this->put('/user/api-tokens/'.$token->id, [
        'name' => $token->name,
        'permissions' => [
            'delete',
            'missing-permission',
        ],
    ]);

    expect($user->fresh()->tokens->first())
        ->can('delete')->toBeTrue()
        ->can('read')->toBeFalse()
        ->can('missing-permission')->toBeFalse();
})->skip(function () {
    return ! Features::hasApiFeatures();
}, 'API support is not enabled.');


================================================
FILE: tests/Feature/AuthenticationTest.php
================================================
<?php

use App\Models\User;

test('login screen can be rendered', function () {
    $response = $this->get('/login');

    $response->assertStatus(200);
});

test('users can authenticate using the login screen', function () {
    $user = User::factory()->create();

    $response = $this->post('/login', [
        'email' => $user->email,
        'password' => 'password',
    ]);

    $this->assertAuthenticated();
    $response->assertRedirect(route('dashboard', absolute: false));
});

test('users cannot authenticate with invalid password', function () {
    $user = User::factory()->create();

    $this->post('/login', [
        'email' => $user->email,
        'password' => 'wrong-password',
    ]);

    $this->assertGuest();
});


================================================
FILE: tests/Feature/BrowserSessionsTest.php
================================================
<?php

use App\Models\User;

test('other browser sessions can be logged out', function () {
    $this->actingAs(User::factory()->create());

    $response = $this->delete('/user/other-browser-sessions', [
        'password' => 'password',
    ]);

    $response->assertSessionHasNoErrors();
});


================================================
FILE: tests/Feature/CreateApiTokenTest.php
================================================
<?php

use App\Models\User;
use Laravel\Jetstream\Features;

test('api tokens can be created', function () {
    if (Features::hasTeamFeatures()) {
        $this->actingAs($user = User::factory()->withPersonalTeam()->create());
    } else {
        $this->actingAs($user = User::factory()->create());
    }

    $this->post('/user/api-tokens', [
        'name' => 'Test Token',
        'permissions' => [
            'read',
            'update',
        ],
    ]);

    expect($user->fresh()->tokens)->toHaveCount(1);
    expect($user->fresh()->tokens->first())
        ->name->toEqual('Test Token')
        ->can('read')->toBeTrue()
        ->can('delete')->toBeFalse();
})->skip(function () {
    return ! Features::hasApiFeatures();
}, 'API support is not enabled.');


================================================
FILE: tests/Feature/CreateTeamTest.php
================================================
<?php

use App\Models\User;

test('teams can be created', function () {
    $this->actingAs($user = User::factory()->withPersonalTeam()->create());

    $this->post('/teams', [
        'name' => 'Test Team',
    ]);

    expect($user->fresh()->ownedTeams)->toHaveCount(2);
    expect($user->fresh()->ownedTeams()->latest('id')->first()->name)->toEqual('Test Team');
});


================================================
FILE: tests/Feature/DeleteAccountTest.php
================================================
<?php

use App\Models\User;
use Laravel\Jetstream\Features;

test('user accounts can be deleted', function () {
    $this->actingAs($user = User::factory()->create());

    $this->delete('/user', [
        'password' => 'password',
    ]);

    expect($user->fresh())->toBeNull();
})->skip(function () {
    return ! Features::hasAccountDeletionFeatures();
}, 'Account deletion is not enabled.');

test('correct password must be provided before account can be deleted', function () {
    $this->actingAs($user = User::factory()->create());

    $this->delete('/user', [
        'password' => 'wrong-password',
    ]);

    expect($user->fresh())->not->toBeNull();
})->skip(function () {
    return ! Features::hasAccountDeletionFeatures();
}, 'Account deletion is not enabled.');


================================================
FILE: tests/Feature/DeleteApiTokenTest.php
================================================
<?php

use App\Models\User;
use Illuminate\Support\Str;
use Laravel\Jetstream\Features;

test('api tokens can be deleted', function () {
    if (Features::hasTeamFeatures()) {
        $this->actingAs($user = User::factory()->withPersonalTeam()->create());
    } else {
        $this->actingAs($user = User::factory()->create());
    }

    $token = $user->tokens()->create([
        'name' => 'Test Token',
        'token' => Str::random(40),
        'abilities' => ['create', 'read'],
    ]);

    $this->delete('/user/api-tokens/'.$token->id);

    expect($user->fresh()->tokens)->toHaveCount(0);
})->skip(function () {
    return ! Features::hasApiFeatures();
}, 'API support is not enabled.');


================================================
FILE: tests/Feature/DeleteTeamTest.php
================================================
<?php

use App\Models\Team;
use App\Models\User;

test('teams can be deleted', function () {
    $this->actingAs($user = User::factory()->withPersonalTeam()->create());

    $user->ownedTeams()->save($team = Team::factory()->make([
        'personal_team' => false,
    ]));

    $team->users()->attach(
        $otherUser = User::factory()->create(), ['role' => 'test-role']
    );

    $this->delete('/teams/'.$team->id);

    expect($team->fresh())->toBeNull();
    expect($otherUser->fresh()->teams)->toHaveCount(0);
});

test('personal teams cant be deleted', function () {
    $this->actingAs($user = User::factory()->withPersonalTeam()->create());

    $this->delete('/teams/'.$user->currentTeam->id);

    expect($user->currentTeam->fresh())->not->toBeNull();
});


================================================
FILE: tests/Feature/EmailVerificationTest.php
================================================
<?php

use App\Models\User;
use Illuminate\Auth\Events\Verified;
use Illuminate\Support\Facades\Event;
use Illuminate\Support\Facades\URL;
use Laravel\Fortify\Features;

test('email verification screen can be rendered', function () {
    $user = User::factory()->withPersonalTeam()->create([
        'email_verified_at' => null,
    ]);

    $response = $this->actingAs($user)->get('/email/verify');

    $response->assertStatus(200);
})->skip(function () {
    return ! Features::enabled(Features::emailVerification());
}, 'Email verification not enabled.');

test('email can be verified', function () {
    Event::fake(Verified::class);

    $user = User::factory()->create([
        'email_verified_at' => null,
    ]);

    $verificationUrl = URL::temporarySignedRoute(
        'verification.verify',
        now()->addMinutes(60),
        ['id' => $user->id, 'hash' => sha1($user->email)]
    );

    $response = $this->actingAs($user)->get($verificationUrl);

    Event::assertDispatched(Verified::class);

    expect($user->fresh()->hasVerifiedEmail())->toBeTrue();
    $response->assertRedirect(route('dashboard', absolute: false).'?verified=1');
})->skip(function () {
    return ! Features::enabled(Features::emailVerification());
}, 'Email verification not enabled.');

test('email can not verified with invalid hash', function () {
    $user = User::factory()->create([
        'email_verified_at' => null,
    ]);

    $verificationUrl = URL::temporarySignedRoute(
        'verification.verify',
        now()->addMinutes(60),
        ['id' => $user->id, 'hash' => sha1('wrong-email')]
    );

    $this->actingAs($user)->get($verificationUrl);

    expect($user->fresh()->hasVerifiedEmail())->toBeFalse();
})->skip(function () {
    return ! Features::enabled(Features::emailVerification());
}, 'Email verification not enabled.');


================================================
FILE: tests/Feature/ExampleTest.php
================================================
<?php

it('returns a successful response', function () {
    $response = $this->get('/');

    $response->assertStatus(200);
});


================================================
FILE: tests/Feature/InviteTeamMemberTest.php
================================================
<?php

use App\Models\User;
use Illuminate\Support\Facades\Mail;
use Laravel\Jetstream\Features;
use Laravel\Jetstream\Mail\TeamInvitation;

test('team members can be invited to team', function () {
    Mail::fake();

    $this->actingAs($user = User::factory()->withPersonalTeam()->create());

    $this->post('/teams/'.$user->currentTeam->id.'/members', [
        'email' => 'test@example.com',
        'role' => 'admin',
    ]);

    Mail::assertSent(TeamInvitation::class);

    expect($user->currentTeam->fresh()->teamInvitations)->toHaveCount(1);
})->skip(function () {
    return ! Features::sendsTeamInvitations();
}, 'Team invitations not enabled.');

test('team member invitations can be cancelled', function () {
    Mail::fake();

    $this->actingAs($user = User::factory()->withPersonalTeam()->create());

    $invitation = $user->currentTeam->teamInvitations()->create([
        'email' => 'test@example.com',
        'role' => 'admin',
    ]);

    $this->delete('/team-invitations/'.$invitation->id);

    expect($user->currentTeam->fresh()->teamInvitations)->toHaveCount(0);
})->skip(function () {
    return ! Features::sendsTeamInvitations();
}, 'Team invitations not enabled.');


================================================
FILE: tests/Feature/LeaveTeamTest.php
================================================
<?php

use App\Models\User;

test('users can leave teams', function () {
    $user = User::factory()->withPersonalTeam()->create();

    $user->currentTeam->users()->attach(
        $otherUser = User::factory()->create(), ['role' => 'admin']
    );

    $this->actingAs($otherUser);

    $this->delete('/teams/'.$user->currentTeam->id.'/members/'.$otherUser->id);

    expect($user->currentTeam->fresh()->users)->toHaveCount(0);
});

test('team owners cant leave their own team', function () {
    $this->actingAs($user = User::factory()->withPersonalTeam()->create());

    $response = $this->delete('/teams/'.$user->currentTeam->id.'/members/'.$user->id);

    $response->assertSessionHasErrorsIn('removeTeamMember', ['team']);

    expect($user->currentTeam->fresh())->not->toBeNull();
});


================================================
FILE: tests/Feature/PasswordConfirmationTest.php
================================================
<?php

use App\Models\User;
use Laravel\Jetstream\Features;

test('confirm password screen can be rendered', function () {
    $user = Features::hasTeamFeatures()
                    ? User::factory()->withPersonalTeam()->create()
                    : User::factory()->create();

    $response = $this->actingAs($user)->get('/user/confirm-password');

    $response->assertStatus(200);
});

test('password can be confirmed', function () {
    $user = User::factory()->create();

    $response = $this->actingAs($user)->post('/user/confirm-password', [
        'password' => 'password',
    ]);

    $response->assertRedirect();
    $response->assertSessionHasNoErrors();
});

test('password is not confirmed with invalid password', function () {
    $user = User::factory()->create();

    $response = $this->actingAs($user)->post('/user/confirm-password', [
        'password' => 'wrong-password',
    ]);

    $response->assertSessionHasErrors();
});


================================================
FILE: tests/Feature/PasswordResetTest.php
================================================
<?php

use App\Models\User;
use Illuminate\Auth\Notifications\ResetPassword;
use Illuminate\Support\Facades\Notification;
use Laravel\Fortify\Features;

test('reset password link screen can be rendered', function () {
    $response = $this->get('/forgot-password');

    $response->assertStatus(200);
})->skip(function () {
    return ! Features::enabled(Features::resetPasswords());
}, 'Password updates are not enabled.');

test('reset password link can be requested', function () {
    Notification::fake();

    $user = User::factory()->create();

    $response = $this->post('/forgot-password', [
        'email' => $user->email,
    ]);

    Notification::assertSentTo($user, ResetPassword::class);
})->skip(function () {
    return ! Features::enabled(Features::resetPasswords());
}, 'Password updates are not enabled.');

test('reset password screen can be rendered', function () {
    Notification::fake();

    $user = User::factory()->create();

    $response = $this->post('/forgot-password', [
        'email' => $user->email,
    ]);

    Notification::assertSentTo($user, ResetPassword::class, function (object $notification) {
        $response = $this->get('/reset-password/'.$notification->token);

        $response->assertStatus(200);

        return true;
    });
})->skip(function () {
    return ! Features::enabled(Features::resetPasswords());
}, 'Password updates are not enabled.');

test('password can be reset with valid token', function () {
    Notification::fake();

    $user = User::factory()->create();

    $response = $this->post('/forgot-password', [
        'email' => $user->email,
    ]);

    Notification::assertSentTo($user, ResetPassword::class, function (object $notification) use ($user) {
        $response = $this->post('/reset-password', [
            'token' => $notification->token,
            'email' => $user->email,
            'password' => 'password',
            'password_confirmation' => 'password',
        ]);

        $response->assertSessionHasNoErrors();

        return true;
    });
})->skip(function () {
    return ! Features::enabled(Features::resetPasswords());
}, 'Password updates are not enabled.');


================================================
FILE: tests/Feature/ProfileInformationTest.php
================================================
<?php

use App\Models\User;

test('profile information can be updated', function () {
    $this->actingAs($user = User::factory()->create());

    $this->put('/user/profile-information', [
        'name' => 'Test Name',
        'email' => 'test@example.com',
    ]);

    expect($user->fresh())
        ->name->toEqual('Test Name')
        ->email->toEqual('test@example.com');
});


================================================
FILE: tests/Feature/RegistrationTest.php
================================================
<?php

use Laravel\Fortify\Features;
use Laravel\Jetstream\Jetstream;

test('registration screen can be rendered', function () {
    $response = $this->get('/register');

    $response->assertStatus(200);
})->skip(function () {
    return ! Features::enabled(Features::registration());
}, 'Registration support is not enabled.');

test('registration screen cannot be rendered if support is disabled', function () {
    $response = $this->get('/register');

    $response->assertStatus(404);
})->skip(function () {
    return Features::enabled(Features::registration());
}, 'Registration support is enabled.');

test('new users can register', function () {
    $response = $this->post('/register', [
        'name' => 'Test User',
        'email' => 'test@example.com',
        'password' => 'password',
        'password_confirmation' => 'password',
        'terms' => Jetstream::hasTermsAndPrivacyPolicyFeature(),
    ]);

    $this->assertAuthenticated();
    $response->assertRedirect(route('dashboard', absolute: false));
})->skip(function () {
    return ! Features::enabled(Features::registration());
}, 'Registration support is not enabled.');


================================================
FILE: tests/Feature/RemoveTeamMemberTest.php
================================================
<?php

use App\Models\User;

test('team members can be removed from teams', function () {
    $this->actingAs($user = User::factory()->withPersonalTeam()->create());

    $user->currentTeam->users()->attach(
        $otherUser = User::factory()->create(), ['role' => 'admin']
    );

    $this->delete('/teams/'.$user->currentTeam->id.'/members/'.$otherUser->id);

    expect($user->currentTeam->fresh()->users)->toHaveCount(0);
});

test('only team owner can remove team members', function () {
    $user = User::factory()->withPersonalTeam()->create();

    $user->currentTeam->users()->attach(
        $otherUser = User::factory()->create(), ['role' => 'admin']
    );

    $this->actingAs($otherUser);

    $response = $this->delete('/teams/'.$user->currentTeam->id.'/members/'.$user->id);

    $response->assertStatus(403);
});


================================================
FILE: tests/Feature/TwoFactorAuthenticationSettingsTest.php
================================================
<?php

use App\Models\User;
use Laravel\Fortify\Features;

test('two factor authentication can be enabled', function () {
    $this->actingAs($user = User::factory()->create());

    $this->withSession(['auth.password_confirmed_at' => time()]);

    $this->post('/user/two-factor-authentication');

    expect($user->fresh()->two_factor_secret)->not->toBeNull();
    expect($user->fresh()->recoveryCodes())->toHaveCount(8);
})->skip(function () {
    return ! Features::canManageTwoFactorAuthentication();
}, 'Two factor authentication is not enabled.');

test('recovery codes can be regenerated', function () {
    $this->actingAs($user = User::factory()->create());

    $this->withSession(['auth.password_confirmed_at' => time()]);

    $this->post('/user/two-factor-authentication');
    $this->post('/user/two-factor-recovery-codes');

    $user = $user->fresh();

    $this->post('/user/two-factor-recovery-codes');

    expect($user->recoveryCodes())->toHaveCount(8);
    expect(array_diff($user->recoveryCodes(), $user->fresh()->recoveryCodes()))->toHaveCount(8);
})->skip(function () {
    return ! Features::canManageTwoFactorAuthentication();
}, 'Two factor authentication is not enabled.');

test('two factor authentication can be disabled', function () {
    $this->actingAs($user = User::factory()->create());

    $this->withSession(['auth.password_confirmed_at' => time()]);

    $this->post('/user/two-factor-authentication');

    $this->assertNotNull($user->fresh()->two_factor_secret);

    $this->delete('/user/two-factor-authentication');

    expect($user->fresh()->two_factor_secret)->toBeNull();
})->skip(function () {
    return ! Features::canManageTwoFactorAuthentication();
}, 'Two factor authentication is not enabled.');


================================================
FILE: tests/Feature/UpdatePasswordTest.php
================================================
<?php

use App\Models\User;
use Illuminate\Support\Facades\Hash;

test('password can be updated', function () {
    $this->actingAs($user = User::factory()->create());

    $this->put('/user/password', [
        'current_password' => 'password',
        'password' => 'new-password',
        'password_confirmation' => 'new-password',
    ]);

    expect(Hash::check('new-password', $user->fresh()->password))->toBeTrue();
});

test('current password must be correct', function () {
    $this->actingAs($user = User::factory()->create());

    $response = $this->put('/user/password', [
        'current_password' => 'wrong-password',
        'password' => 'new-password',
        'password_confirmation' => 'new-password',
    ]);

    $response->assertSessionHasErrors();

    expect(Hash::check('password', $user->fresh()->password))->toBeTrue();
});

test('new passwords must match', function () {
    $this->actingAs($user = User::factory()->create());

    $response = $this->put('/user/password', [
        'current_password' => 'password',
        'password' => 'new-password',
        'password_confirmation' => 'wrong-password',
    ]);

    $response->assertSessionHasErrors();

    expect(Hash::check('password', $user->fresh()->password))->toBeTrue();
});


================================================
FILE: tests/Feature/UpdateTeamMemberRoleTest.php
================================================
<?php

use App\Models\User;

test('team member roles can be updated', function () {
    $this->actingAs($user = User::factory()->withPersonalTeam()->create());

    $user->currentTeam->users()->attach(
        $otherUser = User::factory()->create(), ['role' => 'admin']
    );

    $this->put('/teams/'.$user->currentTeam->id.'/members/'.$otherUser->id, [
        'role' => 'editor',
    ]);

    expect($otherUser->fresh()->hasTeamRole(
        $user->currentTeam->fresh(), 'editor'
    ))->toBeTrue();
});

test('only team owner can update team member roles', function () {
    $user = User::factory()->withPersonalTeam()->create();

    $user->currentTeam->users()->attach(
        $otherUser = User::factory()->create(), ['role' => 'admin']
    );

    $this->actingAs($otherUser);

    $this->put('/teams/'.$user->currentTeam->id.'/members/'.$otherUser->id, [
        'role' => 'editor',
    ]);

    expect($otherUser->fresh()->hasTeamRole(
        $user->currentTeam->fresh(), 'admin'
    ))->toBeTrue();
});


================================================
FILE: tests/Feature/UpdateTeamNameTest.php
================================================
<?php

use App\Models\User;

test('team names can be updated', function () {
    $this->actingAs($user = User::factory()->withPersonalTeam()->create());

    $this->put('/teams/'.$user->currentTeam->id, [
        'name' => 'Test Team',
    ]);

    expect($user->fresh()->ownedTeams)->toHaveCount(1);
    expect($user->currentTeam->fresh()->name)->toEqual('Test Team');
});


================================================
FILE: tests/Pest.php
================================================
<?php

use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;

/*
|--------------------------------------------------------------------------
| Test Case
|--------------------------------------------------------------------------
|
| The closure you provide to your test functions is always bound to a specific PHPUnit test
| case class. By default, that class is "PHPUnit\Framework\TestCase". Of course, you may
| need to change it using the "uses()" function to bind a different classes or traits.
|
*/

uses(TestCase::class, RefreshDatabase::class)->in('Feature');

/*
|--------------------------------------------------------------------------
| Expectations
|--------------------------------------------------------------------------
|
| When you're writing tests, you often need to check that values meet certain conditions. The
| "expect()" function gives you access to a set of "expectations" methods that you can use
| to assert different things. Of course, you may extend the Expectation API at any time.
|
*/

expect()->extend('toBeOne', function () {
    return $this->toBe(1);
});

/*
|--------------------------------------------------------------------------
| Functions
|--------------------------------------------------------------------------
|
| While Pest is very powerful out-of-the-box, you may have some testing code specific to your
| project that you don't want to repeat in every file. Here you can also expose helpers as
| global functions to help you to reduce the number of lines of code in your test files.
|
*/

function something()
{
    // ..
}


================================================
FILE: tests/TestCase.php
================================================
<?php

namespace Tests;

use Illuminate\Foundation\Testing\TestCase as BaseTestCase;

abstract class TestCase extends BaseTestCase
{
    //
}


================================================
FILE: tests/Unit/ExampleTest.php
================================================
<?php

test('that true is true', function () {
    expect(true)->toBeTrue();
});


================================================
FILE: vite.config.js
================================================
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});