├── config ├── .gitkeep ├── database.php ├── services.php ├── mail.php ├── inertia.php └── sanctum.php ├── database ├── .gitignore ├── migrations │ ├── 2024_04_02_000000_rename_password_resets_table.php │ ├── 2020_01_01_000003_create_accounts_table.php │ ├── 2020_01_01_000001_create_password_resets_table.php │ ├── 2024_04_02_000000_add_expires_at_to_personal_access_tokens_table.php │ ├── 2020_01_01_000002_create_failed_jobs_table.php │ ├── 2019_12_14_000001_create_personal_access_tokens_table.php │ ├── 2020_01_01_000004_create_users_table.php │ ├── 2020_01_01_000005_create_organizations_table.php │ └── 2020_01_01_000006_create_contacts_table.php ├── factories │ ├── OrganizationFactory.php │ ├── ContactFactory.php │ └── UserFactory.php └── seeders │ └── DatabaseSeeder.php ├── bootstrap ├── cache │ └── .gitignore ├── providers.php └── app.php ├── storage ├── logs │ └── .gitignore ├── app │ ├── public │ │ └── .gitignore │ └── .gitignore ├── debugbar │ └── .gitignore └── framework │ ├── testing │ └── .gitignore │ ├── views │ └── .gitignore │ ├── cache │ ├── data │ │ └── .gitignore │ └── .gitignore │ ├── sessions │ └── .gitignore │ └── .gitignore ├── public ├── robots.txt ├── index.php ├── .htaccess └── favicon.svg ├── Procfile ├── resources ├── js │ ├── types │ │ ├── vite-env.d.ts │ │ ├── global.d.ts │ │ └── index.d.ts │ ├── utils.ts │ ├── Components │ │ ├── Button │ │ │ ├── DeleteButton.tsx │ │ │ ├── LoadingButton.tsx │ │ │ └── CloseButton.tsx │ │ ├── Form │ │ │ ├── FieldGroup.tsx │ │ │ ├── CheckboxInput.tsx │ │ │ ├── TextInput.tsx │ │ │ ├── SelectInput.tsx │ │ │ └── FileInput.tsx │ │ ├── Messages │ │ │ ├── TrashedMessage.tsx │ │ │ └── FlashMessages.tsx │ │ ├── Menu │ │ │ ├── MainMenu.tsx │ │ │ └── MainMenuItem.tsx │ │ ├── Header │ │ │ ├── TopHeader.tsx │ │ │ └── BottomHeader.tsx │ │ ├── Alert │ │ │ └── Alert.tsx │ │ ├── Pagination │ │ │ └── Pagination.tsx │ │ ├── Table │ │ │ └── Table.tsx │ │ ├── FilterBar │ │ │ └── FilterBar.tsx │ │ └── Logo │ │ │ └── Logo.tsx │ ├── Pages │ │ ├── Reports │ │ │ └── Index.tsx │ │ ├── Error.tsx │ │ ├── Dashboard │ │ │ └── Index.tsx │ │ ├── Organizations │ │ │ ├── Index.tsx │ │ │ ├── Create.tsx │ │ │ └── Edit.tsx │ │ ├── Contacts │ │ │ ├── Index.tsx │ │ │ ├── Create.tsx │ │ │ └── Edit.tsx │ │ ├── Users │ │ │ ├── Index.tsx │ │ │ ├── Create.tsx │ │ │ └── Edit.tsx │ │ └── Auth │ │ │ └── Login.tsx │ ├── app.tsx │ └── Layouts │ │ └── MainLayout.tsx ├── css │ ├── app.css │ └── components │ │ ├── button.css │ │ └── form.css ├── views │ └── app.blade.php └── lang │ └── en │ ├── pagination.php │ ├── auth.php │ ├── passwords.php │ └── validation.php ├── screenshot.png ├── .gitattributes ├── .prettierrc ├── postcss.config.js ├── routes ├── console.php └── web.php ├── vite.config.js ├── .editorconfig ├── app ├── Http │ ├── Controllers │ │ ├── ReportsController.php │ │ ├── DashboardController.php │ │ ├── Controller.php │ │ ├── ImagesController.php │ │ ├── Auth │ │ │ └── LoginController.php │ │ ├── OrganizationsController.php │ │ ├── UsersController.php │ │ └── ContactsController.php │ ├── Resources │ │ ├── UserOrganizationCollection.php │ │ ├── OrganizationCollection.php │ │ ├── ContactCollection.php │ │ ├── UserCollection.php │ │ ├── UserResource.php │ │ ├── ContactResource.php │ │ └── OrganizationResource.php │ ├── Requests │ │ ├── UserDeleteRequest.php │ │ ├── UserUpdateRequest.php │ │ ├── UserStoreRequest.php │ │ ├── OrganizationStoreRequest.php │ │ ├── OrganizationUpdateRequest.php │ │ ├── ContactStoreRequest.php │ │ ├── ContactUpdateRequest.php │ │ └── Auth │ │ │ └── LoginRequest.php │ └── Middleware │ │ ├── TrustProxies.php │ │ └── HandleInertiaRequests.php ├── Models │ ├── Account.php │ ├── Organization.php │ ├── Contact.php │ └── User.php ├── Traits │ └── LockedDemoUser.php └── Providers │ └── AppServiceProvider.php ├── .gitignore ├── .eslintrc.js ├── tests ├── TestCase.php └── Feature │ ├── UsersTest.php │ ├── ContactsTest.php │ └── OrganizationsTest.php ├── artisan ├── tsconfig.json ├── tailwind.config.js ├── package.json ├── phpunit.xml ├── LICENSE ├── .env.example ├── .github └── workflows │ └── tests.yml ├── Makefile ├── readme.md └── composer.json /config/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /database/.gitignore: -------------------------------------------------------------------------------- 1 | *.sqlite* 2 | -------------------------------------------------------------------------------- /bootstrap/cache/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/logs/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /storage/app/public/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/debugbar/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: vendor/bin/heroku-php-apache2 public/ 2 | -------------------------------------------------------------------------------- /storage/app/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !public/ 3 | !.gitignore 4 | -------------------------------------------------------------------------------- /storage/framework/testing/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/framework/views/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/framework/cache/data/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/framework/sessions/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/framework/cache/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !data/ 3 | !.gitignore 4 | -------------------------------------------------------------------------------- /resources/js/types/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liorocks/pingcrm-react/HEAD/screenshot.png -------------------------------------------------------------------------------- /bootstrap/providers.php: -------------------------------------------------------------------------------- 1 | [ 6 | 'table' => 'migrations', 7 | 'update_date_on_publish' => false, // disable to preserve original behavior for existing applications 8 | ], 9 | 10 | ]; 11 | -------------------------------------------------------------------------------- /resources/js/utils.ts: -------------------------------------------------------------------------------- 1 | export function fileSize(size: number) { 2 | const i = Math.floor(Math.log(size) / Math.log(1024)); 3 | return ( 4 | Number((size / Math.pow(1024, i)).toFixed(2)) + 5 | ' ' + 6 | ['B', 'kB', 'MB', 'GB', 'TB'][i] 7 | ); 8 | } 9 | -------------------------------------------------------------------------------- /resources/js/types/global.d.ts: -------------------------------------------------------------------------------- 1 | import { AxiosInstance } from 'axios'; 2 | import { route as ziggyRoute } from 'ziggy-js'; 3 | 4 | declare global { 5 | interface Window { 6 | axios: AxiosInstance; 7 | } 8 | 9 | var route: typeof ziggyRoute; 10 | } 11 | -------------------------------------------------------------------------------- /routes/console.php: -------------------------------------------------------------------------------- 1 | comment(Inspiring::quote()); 8 | })->purpose('Display an inspiring quote')->hourly(); 9 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import laravel from 'laravel-vite-plugin'; 3 | import react from '@vitejs/plugin-react'; 4 | 5 | export default defineConfig({ 6 | plugins: [laravel(['resources/js/app.tsx', 'resources/css/app.css']), react()] 7 | }); 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = space 8 | indent_size = 2 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [*.php] 15 | indent_size = 4 16 | -------------------------------------------------------------------------------- /config/services.php: -------------------------------------------------------------------------------- 1 | [ 6 | 'domain' => env('MAILGUN_DOMAIN'), 7 | 'secret' => env('MAILGUN_SECRET'), 8 | 'endpoint' => env('MAILGUN_ENDPOINT', 'api.mailgun.net'), 9 | 'scheme' => 'https', 10 | ], 11 | 12 | ]; 13 | -------------------------------------------------------------------------------- /app/Http/Controllers/ReportsController.php: -------------------------------------------------------------------------------- 1 | collection->map->only('id', 'name'); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /app/Http/Controllers/Controller.php: -------------------------------------------------------------------------------- 1 | withoutVite(); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /artisan: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env php 2 | handleCommand(new ArgvInput); 14 | 15 | exit($status); 16 | -------------------------------------------------------------------------------- /resources/views/app.blade.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | @routes 7 | @inertiaHead 8 | @viteReactRefresh 9 | @vite(['resources/css/app.css', 'resources/js/app.tsx']) 10 | 11 | 12 | @inertia 13 | 14 | 15 | -------------------------------------------------------------------------------- /config/mail.php: -------------------------------------------------------------------------------- 1 | [ 6 | 'mailgun' => [ 7 | 'transport' => 'mailgun', 8 | // 'client' => [ 9 | // 'timeout' => 5, 10 | // ], 11 | ], 12 | 13 | 'roundrobin' => [ 14 | 'transport' => 'roundrobin', 15 | 'mailers' => [ 16 | 'ses', 17 | 'postmark', 18 | ], 19 | ], 20 | ], 21 | 22 | ]; 23 | -------------------------------------------------------------------------------- /app/Http/Requests/UserDeleteRequest.php: -------------------------------------------------------------------------------- 1 | { 4 | onDelete: () => void; 5 | } 6 | 7 | export default function DeleteButton({ onDelete, children }: Props) { 8 | return ( 9 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /public/index.php: -------------------------------------------------------------------------------- 1 | handleRequest(Request::capture()); 18 | -------------------------------------------------------------------------------- /app/Models/Account.php: -------------------------------------------------------------------------------- 1 | hasMany(User::class); 13 | } 14 | 15 | public function organizations(): HasMany 16 | { 17 | return $this->hasMany(Organization::class); 18 | } 19 | 20 | public function contacts(): HasMany 21 | { 22 | return $this->hasMany(Contact::class); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /app/Http/Resources/OrganizationCollection.php: -------------------------------------------------------------------------------- 1 | collection->map->only( 18 | 'id', 'name', 'phone', 'city', 'deleted_at' 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /resources/js/Pages/Reports/Index.tsx: -------------------------------------------------------------------------------- 1 | import MainLayout from '@/Layouts/MainLayout'; 2 | 3 | function ReportsPage() { 4 | return ( 5 |
6 |

Reports

7 |

Not implemented

8 |
9 | ); 10 | } 11 | 12 | /** 13 | * Persistent Layout (Inertia.js) 14 | * 15 | * [Learn more](https://inertiajs.com/pages#persistent-layouts) 16 | */ 17 | ReportsPage.layout = (page: React.ReactNode) => ( 18 | 19 | ); 20 | 21 | export default ReportsPage; 22 | -------------------------------------------------------------------------------- /app/Http/Resources/ContactCollection.php: -------------------------------------------------------------------------------- 1 | collection->map->only( 18 | 'id', 'name', 'phone', 'city', 'deleted_at', 'organization' 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /database/migrations/2024_04_02_000000_rename_password_resets_table.php: -------------------------------------------------------------------------------- 1 | '« Previous', 17 | 'next' => 'Next »', 18 | 19 | ]; 20 | -------------------------------------------------------------------------------- /resources/js/Components/Form/FieldGroup.tsx: -------------------------------------------------------------------------------- 1 | interface FieldGroupProps { 2 | name?: string; 3 | label?: string; 4 | error?: string; 5 | children: React.ReactNode; 6 | } 7 | 8 | export default function FieldGroup({ 9 | label, 10 | name, 11 | error, 12 | children 13 | }: FieldGroupProps) { 14 | return ( 15 |
16 | {label && ( 17 | 20 | )} 21 | {children} 22 | {error &&
{error}
} 23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /resources/js/Components/Form/CheckboxInput.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps } from 'react'; 2 | 3 | interface CheckboxInputProps extends ComponentProps<'input'> { 4 | label?: string; 5 | } 6 | 7 | export function CheckboxInput({ label, name, ...props }: CheckboxInputProps) { 8 | return ( 9 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /resources/js/Components/Form/TextInput.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps } from 'react'; 2 | 3 | interface TextInputProps extends ComponentProps<'input'> { 4 | error?: string; 5 | } 6 | 7 | export default function TextInput({ 8 | name, 9 | className, 10 | error, 11 | ...props 12 | }: TextInputProps) { 13 | return ( 14 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /resources/js/app.tsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client'; 2 | import { createInertiaApp } from '@inertiajs/react'; 3 | import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; 4 | 5 | const appName = import.meta.env.VITE_APP_NAME || 'Laravel'; 6 | 7 | createInertiaApp({ 8 | title: title => `${title} - ${appName}`, 9 | resolve: name => 10 | resolvePageComponent( 11 | `./Pages/${name}.tsx`, 12 | import.meta.glob('./Pages/**/*.tsx') 13 | ), 14 | setup({ el, App, props }) { 15 | const root = createRoot(el); 16 | 17 | root.render(); 18 | }, 19 | progress: { 20 | color: '#F87415' 21 | } 22 | }); 23 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | import defaultTheme from 'tailwindcss/defaultTheme'; 2 | 3 | export default { 4 | content: ['./resources/**/*.{js,jsx,ts,tsx,blade.php}'], 5 | theme: { 6 | extend: { 7 | colors: { 8 | indigo: { 9 | 100: '#e6e8ff', 10 | 300: '#b2b7ff', 11 | 400: '#7886d7', 12 | 500: '#6574cd', 13 | 600: '#5661b3', 14 | 800: '#2f365f', 15 | 900: '#191e38' 16 | } 17 | }, 18 | fontFamily: { 19 | sans: ['"Cerebri Sans"', ...defaultTheme.fontFamily.sans] 20 | } 21 | } 22 | }, 23 | plugins: [ 24 | require('@tailwindcss/forms') 25 | // ... 26 | ] 27 | }; 28 | -------------------------------------------------------------------------------- /public/.htaccess: -------------------------------------------------------------------------------- 1 | 2 | 3 | Options -MultiViews -Indexes 4 | 5 | 6 | RewriteEngine On 7 | 8 | # Handle Authorization Header 9 | RewriteCond %{HTTP:Authorization} . 10 | RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] 11 | 12 | # Redirect Trailing Slashes If Not A Folder... 13 | RewriteCond %{REQUEST_FILENAME} !-d 14 | RewriteCond %{REQUEST_URI} (.+)/$ 15 | RewriteRule ^ %1 [L,R=301] 16 | 17 | # Send Requests To Front Controller... 18 | RewriteCond %{REQUEST_FILENAME} !-d 19 | RewriteCond %{REQUEST_FILENAME} !-f 20 | RewriteRule ^ index.php [L] 21 | 22 | -------------------------------------------------------------------------------- /resources/lang/en/auth.php: -------------------------------------------------------------------------------- 1 | 'These credentials do not match our records.', 17 | 'throttle' => 'Too many login attempts. Please try again in :seconds seconds.', 18 | 19 | ]; 20 | -------------------------------------------------------------------------------- /resources/js/Components/Messages/TrashedMessage.tsx: -------------------------------------------------------------------------------- 1 | import { Trash2 } from 'lucide-react'; 2 | import Alert from '@/Components/Alert/Alert'; 3 | 4 | interface TrashedMessageProps { 5 | message: string; 6 | onRestore: () => void; 7 | } 8 | 9 | export default function TrashedMessage({ 10 | message, 11 | onRestore 12 | }: TrashedMessageProps) { 13 | return ( 14 | } 18 | action={ 19 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /database/migrations/2020_01_01_000003_create_accounts_table.php: -------------------------------------------------------------------------------- 1 | increments('id'); 16 | $table->string('name', 50); 17 | $table->timestamps(); 18 | }); 19 | } 20 | 21 | /** 22 | * Reverse the migrations. 23 | */ 24 | public function down(): void 25 | { 26 | Schema::dropIfExists('accounts'); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/Traits/LockedDemoUser.php: -------------------------------------------------------------------------------- 1 | route('user')->isDemoUser(); 17 | } 18 | 19 | public function failedAuthorization() 20 | { 21 | 22 | $this->session()->flash('error', 'Updating or deleting the demo user is not allowed.'); 23 | 24 | // Note: This is required, otherwise demo user will update 25 | // and both, success and error messages will be returned. 26 | throw ValidationException::withMessages([]); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /app/Http/Controllers/ImagesController.php: -------------------------------------------------------------------------------- 1 | new SymfonyResponseFactory($request), 16 | 'source' => $filesystem->getDriver(), 17 | 'cache' => $filesystem->getDriver(), 18 | 'cache_path_prefix' => '.glide-cache', 19 | ]); 20 | 21 | return $server->getImageResponse($path, $request->all()); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /app/Http/Middleware/TrustProxies.php: -------------------------------------------------------------------------------- 1 | |string|null 14 | */ 15 | protected $proxies = '*'; 16 | 17 | /** 18 | * The headers that should be used to detect proxies. 19 | * 20 | * @var int 21 | */ 22 | protected $headers = 23 | Request::HEADER_X_FORWARDED_FOR | 24 | Request::HEADER_X_FORWARDED_HOST | 25 | Request::HEADER_X_FORWARDED_PORT | 26 | Request::HEADER_X_FORWARDED_PROTO | 27 | Request::HEADER_X_FORWARDED_AWS_ELB; 28 | } 29 | -------------------------------------------------------------------------------- /resources/js/Components/Button/CloseButton.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps } from 'react'; 2 | import classNames from 'classnames'; 3 | import { X } from 'lucide-react'; 4 | 5 | interface CloseButtonProps extends ComponentProps<'button'> { 6 | color: string | 'red' | 'green'; 7 | } 8 | 9 | export default function CloseButton({ color, onClick }: CloseButtonProps) { 10 | const className = classNames('block -mr-2 fill-current', { 11 | 'text-red-700 group-hover:text-red-800': color === 'red', 12 | 'text-green-700 group-hover:text-green-800': color === 'green' 13 | }); 14 | return ( 15 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /database/factories/OrganizationFactory.php: -------------------------------------------------------------------------------- 1 | $this->faker->company(), 16 | 'email' => $this->faker->companyEmail(), 17 | 'phone' => $this->faker->tollFreePhoneNumber(), 18 | 'address' => $this->faker->streetAddress(), 19 | 'city' => $this->faker->city(), 20 | 'region' => $this->faker->state(), 21 | 'country' => 'US', 22 | 'postal_code' => $this->faker->postcode(), 23 | ]; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /database/migrations/2020_01_01_000001_create_password_resets_table.php: -------------------------------------------------------------------------------- 1 | string('email')->index(); 16 | $table->string('token'); 17 | $table->timestamp('created_at')->nullable(); 18 | }); 19 | } 20 | 21 | /** 22 | * Reverse the migrations. 23 | */ 24 | public function down(): void 25 | { 26 | Schema::dropIfExists('password_resets'); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /resources/css/components/button.css: -------------------------------------------------------------------------------- 1 | .btn-indigo { 2 | @apply px-6 py-3 rounded bg-indigo-700 text-white text-sm font-bold whitespace-nowrap hover:bg-orange-500 focus:bg-orange-500; 3 | } 4 | 5 | .btn-spinner, 6 | .btn-spinner:after { 7 | border-radius: 50%; 8 | width: 1.5em; 9 | height: 1.5em; 10 | } 11 | 12 | .btn-spinner { 13 | font-size: 10px; 14 | position: relative; 15 | text-indent: -9999em; 16 | border-top: 0.2em solid white; 17 | border-right: 0.2em solid white; 18 | border-bottom: 0.2em solid white; 19 | border-left: 0.2em solid transparent; 20 | transform: translateZ(0); 21 | animation: spinning 1s infinite linear; 22 | } 23 | 24 | @keyframes spinning { 25 | 0% { 26 | transform: rotate(0deg); 27 | } 28 | 100% { 29 | transform: rotate(360deg); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /database/migrations/2024_04_02_000000_add_expires_at_to_personal_access_tokens_table.php: -------------------------------------------------------------------------------- 1 | timestamp('expires_at')->nullable()->after('last_used_at'); 16 | }); 17 | } 18 | 19 | /** 20 | * Reverse the migrations. 21 | */ 22 | public function down(): void 23 | { 24 | Schema::table('personal_access_tokens', function (Blueprint $table) { 25 | $table->dropColumn('expires_at'); 26 | }); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /database/factories/ContactFactory.php: -------------------------------------------------------------------------------- 1 | $this->faker->firstName(), 16 | 'last_name' => $this->faker->lastName(), 17 | 'email' => $this->faker->unique()->safeEmail(), 18 | 'phone' => $this->faker->tollFreePhoneNumber(), 19 | 'address' => $this->faker->streetAddress(), 20 | 'city' => $this->faker->city(), 21 | 'region' => $this->faker->state(), 22 | 'country' => 'US', 23 | 'postal_code' => $this->faker->postcode(), 24 | ]; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /app/Http/Resources/UserCollection.php: -------------------------------------------------------------------------------- 1 | collection->map(fn ($user) => [ 18 | 'id' => $user->id, 19 | 'name' => $user->name, 20 | 'email' => $user->email, 21 | 'owner' => $user->owner, 22 | 'photo' => $user->photo ? url()->route('image', ['path' => $user->photo, 'w' => 60, 'h' => 60, 'fit' => 'crop']) : null, 23 | 'deleted_at' => $user->deleted_at, 24 | ]); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /resources/lang/en/passwords.php: -------------------------------------------------------------------------------- 1 | 'Passwords must be at least eight characters and match the confirmation.', 17 | 'reset' => 'Your password has been reset!', 18 | 'sent' => 'We have e-mailed your password reset link!', 19 | 'token' => 'This password reset token is invalid.', 20 | 'user' => "We can't find a user with that e-mail address.", 21 | 22 | ]; 23 | -------------------------------------------------------------------------------- /resources/js/Components/Form/SelectInput.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps } from 'react'; 2 | 3 | interface SelectInputProps extends ComponentProps<'select'> { 4 | error?: string; 5 | options: { value: string; label: string }[]; 6 | } 7 | 8 | export default function SelectInput({ 9 | name, 10 | error, 11 | className, 12 | options = [], 13 | ...props 14 | }: SelectInputProps) { 15 | return ( 16 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /app/Http/Requests/UserUpdateRequest.php: -------------------------------------------------------------------------------- 1 | ['required', 'max:50'], 22 | 'last_name' => ['required', 'max:50'], 23 | 'email' => ['required', 'max:50', 'email', 24 | Rule::unique('users')->ignore($this->route('user')->id), 25 | ], 26 | 'password' => ['nullable'], 27 | 'owner' => ['required', 'boolean'], 28 | 'photo' => ['nullable', 'image'], 29 | ]; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /resources/js/Components/Menu/MainMenu.tsx: -------------------------------------------------------------------------------- 1 | import MainMenuItem from '@/Components/Menu/MainMenuItem'; 2 | import { Building, CircleGauge, Printer, Users } from 'lucide-react'; 3 | 4 | interface MainMenuProps { 5 | className?: string; 6 | } 7 | 8 | export default function MainMenu({ className }: MainMenuProps) { 9 | return ( 10 |
11 | } 15 | /> 16 | } 20 | /> 21 | } 25 | /> 26 | } 30 | /> 31 |
32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /app/Http/Resources/UserResource.php: -------------------------------------------------------------------------------- 1 | $this->id, 19 | 'first_name' => $this->first_name, 20 | 'last_name' => $this->last_name, 21 | 'name' => $this->name, 22 | 'email' => $this->email, 23 | 'owner' => $this->owner, 24 | 'photo' => $this->photo ? url()->route('image', ['path' => $this->photo, 'w' => 60, 'h' => 60, 'fit' => 'crop']) : null, 25 | 'deleted_at' => $this->deleted_at, 26 | 'account' => $this->whenLoaded('account'), 27 | ]; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /database/migrations/2020_01_01_000002_create_failed_jobs_table.php: -------------------------------------------------------------------------------- 1 | id(); 16 | $table->string('uuid')->unique(); 17 | $table->text('connection'); 18 | $table->text('queue'); 19 | $table->longText('payload'); 20 | $table->longText('exception'); 21 | $table->timestamp('failed_at')->useCurrent(); 22 | }); 23 | } 24 | 25 | /** 26 | * Reverse the migrations. 27 | */ 28 | public function down(): void 29 | { 30 | Schema::dropIfExists('failed_jobs'); 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /database/migrations/2019_12_14_000001_create_personal_access_tokens_table.php: -------------------------------------------------------------------------------- 1 | id(); 16 | $table->morphs('tokenable'); 17 | $table->string('name'); 18 | $table->string('token', 64)->unique(); 19 | $table->text('abilities')->nullable(); 20 | $table->timestamp('last_used_at')->nullable(); 21 | $table->timestamps(); 22 | }); 23 | } 24 | 25 | /** 26 | * Reverse the migrations. 27 | */ 28 | public function down(): void 29 | { 30 | Schema::dropIfExists('personal_access_tokens'); 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /app/Http/Requests/UserStoreRequest.php: -------------------------------------------------------------------------------- 1 | ['required', 'max:50'], 29 | 'last_name' => ['required', 'max:50'], 30 | 'email' => ['required', 'max:50', 'email', Rule::unique('users')], 31 | 'password' => ['nullable'], 32 | 'owner' => ['required', 'boolean'], 33 | 'photo' => ['nullable', 'image'], 34 | ]; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /resources/js/Components/Menu/MainMenuItem.tsx: -------------------------------------------------------------------------------- 1 | import { Link } from '@inertiajs/react'; 2 | import classNames from 'classnames'; 3 | 4 | interface MainMenuItemProps { 5 | icon?: React.ReactNode; 6 | link: string; 7 | text: string; 8 | } 9 | 10 | export default function MainMenuItem({ icon, link, text }: MainMenuItemProps) { 11 | const isActive = route().current(link + '*'); 12 | 13 | const iconClasses = classNames({ 14 | 'text-white': isActive, 15 | 'text-indigo-400 group-hover:text-white': !isActive 16 | }); 17 | 18 | const textClasses = classNames({ 19 | 'text-white': isActive, 20 | 'text-indigo-200 group-hover:text-white': !isActive 21 | }); 22 | 23 | return ( 24 |
25 | 29 |
{icon}
30 |
{text}
31 | 32 |
33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /app/Http/Resources/ContactResource.php: -------------------------------------------------------------------------------- 1 | $this->id, 19 | 'first_name' => $this->first_name, 20 | 'last_name' => $this->last_name, 21 | 'email' => $this->email, 22 | 'phone' => $this->phone, 23 | 'address' => $this->address, 24 | 'city' => $this->city, 25 | 'region' => $this->region, 26 | 'country' => $this->country, 27 | 'postal_code' => $this->postal_code, 28 | 'deleted_at' => $this->deleted_at, 29 | 'organization_id' => $this->organization_id, 30 | ]; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /app/Http/Resources/OrganizationResource.php: -------------------------------------------------------------------------------- 1 | $this->id, 19 | 'name' => $this->name, 20 | 'email' => $this->email, 21 | 'phone' => $this->phone, 22 | 'address' => $this->address, 23 | 'city' => $this->city, 24 | 'region' => $this->region, 25 | 'country' => $this->country, 26 | 'postal_code' => $this->postal_code, 27 | 'deleted_at' => $this->deleted_at, 28 | 'contacts' => $this->contacts()->orderByName()->get()->map->only('id', 'name', 'city', 'phone'), 29 | ]; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "type": "module", 4 | "scripts": { 5 | "dev": "vite", 6 | "prod": "vite build" 7 | }, 8 | "dependencies": { 9 | "@inertiajs/react": "^1.0.0", 10 | "@sentry/browser": "^7.119.1", 11 | "autoprefixer": "^10.4.13", 12 | "classnames": "^2.3.2", 13 | "cross-env": "^7.0.3", 14 | "eslint": "^8.32.0", 15 | "lodash": "^4.17.21", 16 | "lucide-react": "^0.378.0", 17 | "postcss-import": "^15.1.0", 18 | "react": "^18.2.0", 19 | "react-dom": "^18.2.0", 20 | "react-use": "^17.4.0", 21 | "tailwindcss": "^3.4.3" 22 | }, 23 | "devDependencies": { 24 | "@tailwindcss/forms": "^0.5.7", 25 | "@types/lodash": "^4.17.4", 26 | "@types/node": "^20.12.12", 27 | "@types/react": "^18.3.2", 28 | "@types/react-dom": "^18.3.0", 29 | "@vitejs/plugin-react": "^4.2.1", 30 | "eslint-plugin-react": "^7.32.1", 31 | "laravel-vite-plugin": "^1.0.4", 32 | "postcss": "^8.4.21", 33 | "typescript": "^5.4.5", 34 | "vite": "^5.4.14" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /app/Http/Requests/OrganizationStoreRequest.php: -------------------------------------------------------------------------------- 1 | ['required', 'max:100'], 28 | 'email' => ['nullable', 'max:50', 'email'], 29 | 'phone' => ['nullable', 'max:50'], 30 | 'address' => ['nullable', 'max:150'], 31 | 'city' => ['nullable', 'max:50'], 32 | 'region' => ['nullable', 'max:50'], 33 | 'country' => ['nullable', 'max:2'], 34 | 'postal_code' => ['nullable', 'max:25'], 35 | ]; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /app/Http/Requests/OrganizationUpdateRequest.php: -------------------------------------------------------------------------------- 1 | ['required', 'max:100'], 28 | 'email' => ['nullable', 'max:50', 'email'], 29 | 'phone' => ['nullable', 'max:50'], 30 | 'address' => ['nullable', 'max:150'], 31 | 'city' => ['nullable', 'max:50'], 32 | 'region' => ['nullable', 'max:50'], 33 | 'country' => ['nullable', 'max:2'], 34 | 'postal_code' => ['nullable', 'max:25'], 35 | ]; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /bootstrap/app.php: -------------------------------------------------------------------------------- 1 | withProviders() 10 | ->withRouting( 11 | web: __DIR__.'/../routes/web.php', 12 | // api: __DIR__.'/../routes/api.php', 13 | commands: __DIR__.'/../routes/console.php', 14 | // channels: __DIR__.'/../routes/channels.php', 15 | health: '/up', 16 | ) 17 | ->withMiddleware(function (Middleware $middleware) { 18 | $middleware->redirectGuestsTo(fn () => route('login')); 19 | $middleware->redirectUsersTo(AppServiceProvider::HOME); 20 | 21 | $middleware->web(\App\Http\Middleware\HandleInertiaRequests::class); 22 | 23 | $middleware->throttleApi(); 24 | 25 | $middleware->replace(\Illuminate\Http\Middleware\TrustProxies::class, \App\Http\Middleware\TrustProxies::class); 26 | }) 27 | ->withExceptions(function (Exceptions $exceptions) { 28 | // 29 | })->create(); 30 | -------------------------------------------------------------------------------- /phpunit.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | tests/Feature 10 | 11 | 12 | 13 | 14 | app 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Jonathan Reinink 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /app/Models/Organization.php: -------------------------------------------------------------------------------- 1 | where($field ?? 'id', $value)->withTrashed()->firstOrFail(); 18 | } 19 | 20 | public function contacts(): HasMany 21 | { 22 | return $this->hasMany(Contact::class); 23 | } 24 | 25 | public function scopeFilter($query, array $filters) 26 | { 27 | $query->when($filters['search'] ?? null, function ($query, $search) { 28 | $query->where('name', 'like', '%'.$search.'%'); 29 | })->when($filters['trashed'] ?? null, function ($query, $trashed) { 30 | if ($trashed === 'with') { 31 | $query->withTrashed(); 32 | } elseif ($trashed === 'only') { 33 | $query->onlyTrashed(); 34 | } 35 | }); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /database/migrations/2020_01_01_000004_create_users_table.php: -------------------------------------------------------------------------------- 1 | increments('id'); 16 | $table->integer('account_id')->index(); 17 | $table->string('first_name', 25); 18 | $table->string('last_name', 25); 19 | $table->string('email', 50)->unique(); 20 | $table->timestamp('email_verified_at')->nullable(); 21 | $table->string('password')->nullable(); 22 | $table->boolean('owner')->default(false); 23 | $table->string('photo', 100)->nullable(); 24 | $table->rememberToken(); 25 | $table->timestamps(); 26 | $table->softDeletes(); 27 | }); 28 | } 29 | 30 | /** 31 | * Reverse the migrations. 32 | */ 33 | public function down(): void 34 | { 35 | Schema::dropIfExists('users'); 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /resources/js/Components/Messages/FlashMessages.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | import { usePage } from '@inertiajs/react'; 3 | import { PageProps } from '@/types'; 4 | import Alert from '@/Components/Alert/Alert'; 5 | 6 | export default function FlashedMessages() { 7 | const [visible, setVisible] = useState(true); 8 | const { flash, errors } = usePage().props; 9 | const formErrors = Object.keys(errors).length; 10 | 11 | useEffect(() => { 12 | setVisible(true); 13 | }, [flash, errors]); 14 | 15 | return ( 16 | <> 17 | {flash.success && visible && ( 18 | setVisible(false)} 22 | /> 23 | )} 24 | {flash.error && visible && ( 25 | setVisible(false)} 29 | /> 30 | )} 31 | {formErrors > 0 && visible && ( 32 | setVisible(false)} 36 | /> 37 | )} 38 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /database/factories/UserFactory.php: -------------------------------------------------------------------------------- 1 | $this->faker->firstName(), 22 | 'last_name' => $this->faker->lastName(), 23 | 'email' => $this->faker->unique()->safeEmail(), 24 | 'email_verified_at' => now(), 25 | 'password' => static::$password ??= Hash::make('password'), 26 | 'remember_token' => Str::random(10), 27 | 'owner' => false, 28 | ]; 29 | } 30 | 31 | /** 32 | * Indicate that the model's email address should be unverified. 33 | */ 34 | public function unverified(): Factory 35 | { 36 | return $this->state(function (array $attributes) { 37 | return [ 38 | 'email_verified_at' => null, 39 | ]; 40 | }); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /database/seeders/DatabaseSeeder.php: -------------------------------------------------------------------------------- 1 | 'Acme Corporation']); 19 | 20 | User::factory()->create([ 21 | 'account_id' => $account->id, 22 | 'first_name' => 'John', 23 | 'last_name' => 'Doe', 24 | 'email' => 'johndoe@example.com', 25 | 'password' => 'secret', 26 | 'owner' => true, 27 | ]); 28 | 29 | User::factory(5)->create(['account_id' => $account->id]); 30 | 31 | $organizations = Organization::factory(100) 32 | ->create(['account_id' => $account->id]); 33 | 34 | Contact::factory(100) 35 | ->create(['account_id' => $account->id]) 36 | ->each(function ($contact) use ($organizations) { 37 | $contact->update(['organization_id' => $organizations->random()->id]); 38 | }); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /database/migrations/2020_01_01_000005_create_organizations_table.php: -------------------------------------------------------------------------------- 1 | increments('id'); 16 | $table->integer('account_id')->index(); 17 | $table->string('name', 100); 18 | $table->string('email', 50)->nullable(); 19 | $table->string('phone', 50)->nullable(); 20 | $table->string('address', 150)->nullable(); 21 | $table->string('city', 50)->nullable(); 22 | $table->string('region', 50)->nullable(); 23 | $table->string('country', 2)->nullable(); 24 | $table->string('postal_code', 25)->nullable(); 25 | $table->timestamps(); 26 | $table->softDeletes(); 27 | }); 28 | } 29 | 30 | /** 31 | * Reverse the migrations. 32 | */ 33 | public function down(): void 34 | { 35 | Schema::dropIfExists('organizations'); 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /resources/js/Components/Header/TopHeader.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Link } from '@inertiajs/react'; 3 | import Logo from '@/Components/Logo/Logo'; 4 | import MainMenu from '@/Components/Menu/MainMenu'; 5 | import { Menu } from 'lucide-react'; 6 | 7 | export default () => { 8 | const [menuOpened, setMenuOpened] = useState(false); 9 | return ( 10 |
11 | 12 | 13 | 14 |
15 | setMenuOpened(true)} 19 | className="cursor-pointer" 20 | /> 21 |
22 | 23 |
{ 25 | setMenuOpened(false); 26 | }} 27 | className="fixed inset-0 z-10 bg-black opacity-25" 28 | /> 29 |
30 |
31 |
32 | ); 33 | }; 34 | -------------------------------------------------------------------------------- /app/Http/Controllers/Auth/LoginController.php: -------------------------------------------------------------------------------- 1 | authenticate(); 30 | 31 | $request->session()->regenerate(); 32 | 33 | return redirect()->intended(AppServiceProvider::HOME); 34 | } 35 | 36 | /** 37 | * Destroy an authenticated session. 38 | */ 39 | public function destroy(Request $request): RedirectResponse 40 | { 41 | Auth::guard('web')->logout(); 42 | 43 | $request->session()->invalidate(); 44 | 45 | $request->session()->regenerateToken(); 46 | 47 | return redirect('/'); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /app/Providers/AppServiceProvider.php: -------------------------------------------------------------------------------- 1 | bootRoute(); 40 | } 41 | 42 | public function bootRoute(): void 43 | { 44 | RateLimiter::for('api', function (Request $request) { 45 | return Limit::perMinute(60)->by($request->user()?->id ?: $request->ip()); 46 | }); 47 | 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /resources/js/Pages/Error.tsx: -------------------------------------------------------------------------------- 1 | import { PageProps } from '@/types'; 2 | import { Head } from '@inertiajs/react'; 3 | 4 | type ErrorPageProps = PageProps<{ 5 | status: number; 6 | }>; 7 | 8 | export default function ErrorPage({ status }: ErrorPageProps) { 9 | /** 10 | * Alternative way to get the status code using the `usePage` hook. 11 | * 12 | * `const { status } = usePage().props;` 13 | * 14 | * [Read more](https://inertiajs.com/error-handling) 15 | */ 16 | 17 | const title = { 18 | 503: '503: Service Unavailable', 19 | 500: '500: Server Error', 20 | 404: '404: Page Not Found', 21 | 403: '403: Forbidden' 22 | }[status]; 23 | 24 | const description = { 25 | 503: 'Sorry, we are doing some maintenance. Please check back soon.', 26 | 500: 'Whoops, something went wrong on our servers.', 27 | 404: 'Sorry, the page you are looking for could not be found.', 28 | 403: 'Sorry, you are forbidden from accessing this page.' 29 | }[status]; 30 | 31 | return ( 32 |
33 | 34 |
35 |

{title}

36 |

{description}

37 |
38 |
39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /database/migrations/2020_01_01_000006_create_contacts_table.php: -------------------------------------------------------------------------------- 1 | increments('id'); 16 | $table->integer('account_id')->index(); 17 | $table->integer('organization_id')->nullable()->index(); 18 | $table->string('first_name', 25); 19 | $table->string('last_name', 25); 20 | $table->string('email', 50)->nullable(); 21 | $table->string('phone', 50)->nullable(); 22 | $table->string('address', 150)->nullable(); 23 | $table->string('city', 50)->nullable(); 24 | $table->string('region', 50)->nullable(); 25 | $table->string('country', 2)->nullable(); 26 | $table->string('postal_code', 25)->nullable(); 27 | $table->timestamps(); 28 | $table->softDeletes(); 29 | }); 30 | } 31 | 32 | /** 33 | * Reverse the migrations. 34 | */ 35 | public function down(): void 36 | { 37 | Schema::dropIfExists('contacts'); 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /resources/js/Pages/Dashboard/Index.tsx: -------------------------------------------------------------------------------- 1 | import { Link } from '@inertiajs/react'; 2 | import MainLayout from '@/Layouts/MainLayout'; 3 | 4 | function DashboardPage() { 5 | return ( 6 |
7 |

Dashboard

8 |

9 | Hey there! Welcome to Ping CRM, a demo app designed to help illustrate 10 | how 11 | 15 | Inertia.js 16 | 17 | works with 18 | 22 | React 23 | 24 | . 25 |

26 |
27 | 28 | 500 error 29 | 30 | 31 | 404 error 32 | 33 |
34 |
35 | ); 36 | } 37 | 38 | /** 39 | * Persistent Layout (Inertia.js) 40 | * 41 | * [Learn more](https://inertiajs.com/pages#persistent-layouts) 42 | */ 43 | DashboardPage.layout = (page: React.ReactNode) => ( 44 | 45 | ); 46 | 47 | export default DashboardPage; 48 | -------------------------------------------------------------------------------- /app/Http/Requests/ContactStoreRequest.php: -------------------------------------------------------------------------------- 1 | ['required', 'max:50'], 30 | 'last_name' => ['required', 'max:50'], 31 | 'organization_id' => ['nullable', Rule::exists('organizations', 'id')->where(function ($query) { 32 | $query->where('account_id', Auth::user()->account_id); 33 | })], 34 | 'email' => ['nullable', 'max:50', 'email'], 35 | 'phone' => ['nullable', 'max:50'], 36 | 'address' => ['nullable', 'max:150'], 37 | 'city' => ['nullable', 'max:50'], 38 | 'region' => ['nullable', 'max:50'], 39 | 'country' => ['nullable', 'max:2'], 40 | 'postal_code' => ['nullable', 'max:25'], 41 | ]; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /app/Http/Requests/ContactUpdateRequest.php: -------------------------------------------------------------------------------- 1 | ['required', 'max:50'], 30 | 'last_name' => ['required', 'max:50'], 31 | 'organization_id' => ['nullable', Rule::exists('organizations', 'id')->where(function ($query) { 32 | $query->where('account_id', Auth::user()->account_id); 33 | })], 34 | 'email' => ['nullable', 'max:50', 'email'], 35 | 'phone' => ['nullable', 'max:50'], 36 | 'address' => ['nullable', 'max:150'], 37 | 'city' => ['nullable', 'max:50'], 38 | 'region' => ['nullable', 'max:50'], 39 | 'country' => ['nullable', 'max:2'], 40 | 'postal_code' => ['nullable', 'max:25'], 41 | ]; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /resources/css/components/form.css: -------------------------------------------------------------------------------- 1 | .form-label { 2 | @apply mb-2 block text-gray-800 select-none; 3 | } 4 | 5 | .form-input, 6 | .form-textarea, 7 | .form-select { 8 | @apply p-2 leading-normal block w-full border border-gray-300 text-gray-800 bg-white font-sans rounded text-left appearance-none relative focus:outline-none focus:ring-1 focus:ring-indigo-400 focus:border-indigo-400; 9 | @apply placeholder-gray-600 placeholder-opacity-100; 10 | } 11 | 12 | .form-select { 13 | @apply pr-6; 14 | 15 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAABGdBTUEAALGPC/xhBQAAAQtJREFUOBG1lEEOgjAQRalbGj2OG9caOACn4ALGtfEuHACiazceR1PWOH/CNA3aMiTaBDpt/7zPdBKy7M/DCL9pGkvxxVp7KsvyJftL5rZt1865M+Ucq6pyyF3hNcI7Cuu+728QYn/JQA5yKaempxuZmQngOwEaYx55nu+1lQh8GIatMGi+01NwBcEmhxBqK4nAPZJ78K0KKFAJmR3oPp8+Iwgob0Oa6+TLoeCvRx+mTUYf/FVBGTPRwDkfLxnaSrRwcH0FWhNOmrkWYbE2XEicqgSa1J0LQ+aPCuQgZiLnwewbGuz5MGoAhcIkCQcjaTBjMgtXGURMVHC1wcQEy0J+Zlj8bKAnY1/UzDe2dbAVqfXn6wAAAABJRU5ErkJggg=='); 16 | background-size: 0.7rem; 17 | background-repeat: no-repeat; 18 | background-position: right 0.7rem center; 19 | 20 | &::-ms-expand { 21 | @apply opacity-0; 22 | } 23 | } 24 | 25 | .form-error { 26 | @apply text-red-500 mt-2 text-sm; 27 | } 28 | 29 | .form-input.error, 30 | .form-textarea.error, 31 | .form-select.error { 32 | @apply border-red-400 focus:border-red-400 focus:ring-red-400; 33 | } 34 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | APP_NAME="Ping CRM" 2 | APP_ENV=local 3 | APP_KEY= 4 | APP_DEBUG=true 5 | APP_TIMEZONE=UTC 6 | APP_URL=http://localhost 7 | 8 | APP_LOCALE=en 9 | APP_FALLBACK_LOCALE=en 10 | APP_FAKER_LOCALE=en_US 11 | 12 | APP_MAINTENANCE_DRIVER=file 13 | APP_MAINTENANCE_STORE=database 14 | 15 | BCRYPT_ROUNDS=12 16 | 17 | LOG_CHANNEL=stack 18 | LOG_STACK=single 19 | LOG_DEPRECATIONS_CHANNEL=null 20 | LOG_LEVEL=debug 21 | 22 | DB_CONNECTION=sqlite 23 | #DB_HOST=127.0.0.1 24 | #DB_PORT=3306 25 | #DB_DATABASE=pingcrm 26 | #DB_USERNAME=root 27 | #DB_PASSWORD= 28 | 29 | BROADCAST_CONNECTION=log 30 | CACHE_STORE=file 31 | FILESYSTEM_DISK=local 32 | QUEUE_CONNECTION=sync 33 | SESSION_DRIVER=file 34 | SESSION_LIFETIME=120 35 | SESSION_ENCRYPT=false 36 | SESSION_PATH=/ 37 | SESSION_DOMAIN=null 38 | 39 | MEMCACHED_HOST=127.0.0.1 40 | 41 | REDIS_HOST=127.0.0.1 42 | REDIS_PASSWORD=null 43 | REDIS_PORT=6379 44 | 45 | MAIL_MAILER=smtp 46 | MAIL_HOST=mailhog 47 | MAIL_PORT=1025 48 | MAIL_USERNAME=null 49 | MAIL_PASSWORD=null 50 | MAIL_ENCRYPTION=null 51 | MAIL_FROM_ADDRESS=null 52 | MAIL_FROM_NAME="${APP_NAME}" 53 | 54 | AWS_ACCESS_KEY_ID= 55 | AWS_SECRET_ACCESS_KEY= 56 | AWS_DEFAULT_REGION=us-east-1 57 | AWS_BUCKET= 58 | AWS_USE_PATH_STYLE_ENDPOINT=false 59 | 60 | PUSHER_APP_ID= 61 | PUSHER_APP_KEY= 62 | PUSHER_APP_SECRET= 63 | PUSHER_APP_CLUSTER=mt1 64 | 65 | VITE_APP_NAME="${APP_NAME}" 66 | VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}" 67 | VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" 68 | -------------------------------------------------------------------------------- /resources/js/Components/Alert/Alert.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Check, CircleX, TriangleAlert } from 'lucide-react'; 3 | import CloseButton from '@/Components/Button/CloseButton'; 4 | 5 | interface Alert { 6 | message: string; 7 | icon?: React.ReactNode; 8 | action?: React.ReactNode; 9 | onClose?: () => void; 10 | variant?: 'success' | 'error' | 'warning'; 11 | } 12 | 13 | export default function Alert({ 14 | icon, 15 | action, 16 | message, 17 | variant, 18 | onClose 19 | }: Alert) { 20 | const color = { 21 | success: 'green', 22 | error: 'red', 23 | warning: 'yellow' 24 | }[variant || 'success']; 25 | 26 | const backGroundColor = { 27 | success: 'bg-green-500 text-white', 28 | error: 'bg-red-500 text-white', 29 | warning: 'bg-yellow-500 text-yellow-800' 30 | }[variant || 'success']; 31 | 32 | const iconComponent = { 33 | success: , 34 | error: , 35 | warning: 36 | }[variant || 'success']; 37 | 38 | return ( 39 |
42 |
43 | {icon || iconComponent} 44 |
{message}
45 |
46 | {action} 47 | {onClose && } 48 |
49 | ); 50 | } 51 | -------------------------------------------------------------------------------- /.github/workflows/tests.yml: -------------------------------------------------------------------------------- 1 | name: Tests 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | 9 | jobs: 10 | laravel-tests: 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - uses: shivammathur/setup-php@b7d1d9c9a92d8d8463ce36d7f60da34d461724f8 15 | with: 16 | php-version: '8.3' 17 | - uses: actions/checkout@v2 18 | - name: Cache composer dependencies 19 | uses: actions/cache@v1 20 | with: 21 | path: vendor 22 | key: composer-${{ hashFiles('composer.lock') }} 23 | - name: Copy .env 24 | run: php -r "file_exists('.env') || copy('.env.example', '.env');" 25 | - name: Install Dependencies 26 | run: composer install -q --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist 27 | - name: Generate key 28 | run: php artisan key:generate 29 | - name: Directory Permissions 30 | run: chmod -R 777 storage bootstrap/cache 31 | - name: Create Database 32 | run: | 33 | mkdir -p database 34 | touch database/database.sqlite 35 | - name: Cache npm dependencies 36 | uses: actions/cache@v1 37 | with: 38 | path: node_modules 39 | key: npm-${{ hashFiles('package-lock.json') }} 40 | - name: Run NPM Scripts 41 | run: npm ci && npm run prod 42 | - name: Run Tests 43 | env: 44 | DB_CONNECTION: sqlite 45 | DB_DATABASE: database/database.sqlite 46 | run: php artisan test --parallel 47 | -------------------------------------------------------------------------------- /app/Http/Middleware/HandleInertiaRequests.php: -------------------------------------------------------------------------------- 1 | function () { 39 | return [ 40 | 'user' => auth()->check() ? new UserResource(auth()->user()->load('account')) : null, 41 | ]; 42 | }, 43 | 'flash' => function () use ($request) { 44 | return [ 45 | 'success' => $request->session()->get('success'), 46 | 'error' => $request->session()->get('error'), 47 | ]; 48 | }, 49 | ]); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /resources/js/Layouts/MainLayout.tsx: -------------------------------------------------------------------------------- 1 | import { Head } from '@inertiajs/react'; 2 | import MainMenu from '@/Components/Menu/MainMenu'; 3 | import FlashMessages from '@/Components/Messages/FlashMessages'; 4 | import TopHeader from '@/Components/Header/TopHeader'; 5 | import BottomHeader from '@/Components/Header/BottomHeader'; 6 | 7 | interface MainLayoutProps { 8 | title?: string; 9 | children: React.ReactNode; 10 | } 11 | 12 | export default function MainLayout({ title, children }: MainLayoutProps) { 13 | return ( 14 | <> 15 | 16 |
17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 | {/** 25 | * We need to scroll the content of the page, not the whole page. 26 | * So we need to add `scroll-region="true"` to the div below. 27 | * 28 | * [Read more](https://inertiajs.com/pages#scroll-regions) 29 | */} 30 |
34 | 35 | {children} 36 |
37 |
38 |
39 |
40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | # THIS := $(realpath $(lastword $(MAKEFILE_LIST))) 2 | # HERE := $(shell dirname $(THIS)) 3 | 4 | 5 | .PHONY: all 6 | 7 | all: bannar setup install migrate note serve 8 | 9 | setup: 10 | @php -r "file_exists('.env') || copy('.env.example', '.env');" 11 | @rm -fr database/database.sqlite 12 | @touch database/database.sqlite 13 | 14 | install: 15 | @$(MAKE) composer 16 | @$(MAKE) npm 17 | @$(MAKE) key 18 | 19 | composer: 20 | @composer install 21 | 22 | npm: 23 | @npm ci 24 | @npm run dev 25 | 26 | key: 27 | @php artisan key:generate 28 | 29 | migrate: 30 | @php artisan migrate:refresh 31 | @php artisan db:seed 32 | 33 | serve: 34 | @php artisan serve 35 | @$(MAKE) note 36 | 37 | test: 38 | @php ./vendor/bin/phpunit --testdox 39 | 40 | test-coverage: 41 | @php ./vendor/bin/phpunit --coverage-html storage/logs/coverage --testdox 42 | 43 | note: 44 | @echo "\n======================================== [NOTE] ========================================" 45 | @echo "You're ready to go! Visit Ping CRM in your browser, and login with: " 46 | @echo "[*] Username: johndoe@example.com " 47 | @echo "[*] Password: secret" 48 | @echo "========================================================================================\n" 49 | 50 | bannar: 51 | @echo " _____ _ _____ _____ __ __" 52 | @echo "| __ (_) / ____| __ \| \/ |" 53 | @echo "| |__) | _ __ __ _| | | |__) | \ / |" 54 | @echo "| ___/ | '_ \ / _\` | | | _ /| |\/| |" 55 | @echo "| | | | | | | (_| | |____| | \ \| | | |" 56 | @echo "|_| |_|_| |_|\__, |\_____|_| \_\_| |_|" 57 | @echo " __/ |" 58 | @echo " |___/" 59 | @echo "\n" 60 | -------------------------------------------------------------------------------- /config/inertia.php: -------------------------------------------------------------------------------- 1 | [ 20 | 21 | 'enabled' => true, 22 | 23 | 'url' => 'http://127.0.0.1:13714/render', 24 | 25 | ], 26 | 27 | /* 28 | |-------------------------------------------------------------------------- 29 | | Testing 30 | |-------------------------------------------------------------------------- 31 | | 32 | | The values described here are used to locate Inertia components on the 33 | | filesystem. For instance, when using `assertInertia`, the assertion 34 | | attempts to locate the component as a file relative to any of the 35 | | paths AND with any of the extensions specified here. 36 | | 37 | */ 38 | 39 | 'testing' => [ 40 | 41 | 'ensure_pages_exist' => true, 42 | 43 | 'page_paths' => [ 44 | 45 | resource_path('js/Pages'), 46 | 47 | ], 48 | 49 | 'page_extensions' => [ 50 | 51 | 'js', 52 | 'jsx', 53 | 'svelte', 54 | 'ts', 55 | 'tsx', 56 | 'vue', 57 | 58 | ], 59 | 60 | ], 61 | 62 | ]; 63 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Ping CRM React 2 | 3 | A demo application to illustrate how [Inertia.js](https://inertiajs.com/) works with [Laravel](https://laravel.com/) and [React](https://reactjs.org/). 4 | 5 | > This is a port of the original [Ping CRM](https://github.com/inertiajs/pingcrm) written in Laravel and Vue. 6 | 7 | ![](https://raw.githubusercontent.com/liorocks/pingcrm-react/master/screenshot.png) 8 | 9 | ## Installation 10 | 11 | Clone the repo locally: 12 | 13 | ```sh 14 | git clone https://github.com/liorocks/pingcrm-react.git 15 | cd pingcrm-react 16 | ``` 17 | 18 | Install PHP dependencies: 19 | 20 | ```sh 21 | composer install 22 | ``` 23 | 24 | Install NPM dependencies: 25 | 26 | ```sh 27 | npm install 28 | ``` 29 | 30 | Build assets: 31 | 32 | ```sh 33 | npm run dev 34 | ``` 35 | 36 | Setup configuration: 37 | 38 | ```sh 39 | cp .env.example .env 40 | ``` 41 | 42 | Generate application key: 43 | 44 | ```sh 45 | php artisan key:generate 46 | ``` 47 | 48 | Create an SQLite database. You can also use another database (MySQL, Postgres), simply update your configuration accordingly. 49 | 50 | ```sh 51 | touch database/database.sqlite 52 | ``` 53 | 54 | Run database migrations: 55 | 56 | ```sh 57 | php artisan migrate 58 | ``` 59 | 60 | Run database seeder: 61 | 62 | ```sh 63 | php artisan db:seed 64 | ``` 65 | 66 | Run artisan server: 67 | 68 | ```sh 69 | php artisan serve 70 | ``` 71 | 72 | You're ready to go! [Visit Ping CRM](http://127.0.0.1:8000/) in your browser, and login with: 73 | 74 | - **Username:** johndoe@example.com 75 | - **Password:** secret 76 | 77 | ## Running tests 78 | 79 | To run the Ping CRM tests, run: 80 | 81 | ``` 82 | php artisan test 83 | ``` 84 | 85 | ## Credits 86 | 87 | - Original work by Jonathan Reinink (@reinink) and contributors 88 | - Port to Ruby on Rails by Georg Ledermann (@ledermann) 89 | - Port to React by Lio (@liorocks) 90 | -------------------------------------------------------------------------------- /app/Models/Contact.php: -------------------------------------------------------------------------------- 1 | where($field ?? 'id', $value)->withTrashed()->firstOrFail(); 18 | } 19 | 20 | public function organization(): BelongsTo 21 | { 22 | return $this->belongsTo(Organization::class); 23 | } 24 | 25 | public function getNameAttribute() 26 | { 27 | return $this->first_name.' '.$this->last_name; 28 | } 29 | 30 | public function scopeOrderByName($query) 31 | { 32 | $query->orderBy('last_name')->orderBy('first_name'); 33 | } 34 | 35 | public function scopeFilter($query, array $filters) 36 | { 37 | $query->when($filters['search'] ?? null, function ($query, $search) { 38 | $query->where(function ($query) use ($search) { 39 | $query->where('first_name', 'like', '%'.$search.'%') 40 | ->orWhere('last_name', 'like', '%'.$search.'%') 41 | ->orWhere('email', 'like', '%'.$search.'%') 42 | ->orWhereHas('organization', function ($query) use ($search) { 43 | $query->where('name', 'like', '%'.$search.'%'); 44 | }); 45 | }); 46 | })->when($filters['trashed'] ?? null, function ($query, $trashed) { 47 | if ($trashed === 'with') { 48 | $query->withTrashed(); 49 | } elseif ($trashed === 'only') { 50 | $query->onlyTrashed(); 51 | } 52 | }); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /resources/js/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { Config } from 'ziggy-js'; 2 | 3 | export interface User { 4 | id: number; 5 | name: string; 6 | first_name: string; 7 | last_name: string; 8 | email: string; 9 | owner: string; 10 | photo: string; 11 | deleted_at: string; 12 | account: Account; 13 | } 14 | 15 | export interface Account { 16 | id: number; 17 | name: string; 18 | users: User[]; 19 | contacts: Contact[]; 20 | organizations: Organization[]; 21 | } 22 | 23 | export interface Contact { 24 | id: number; 25 | name: string; 26 | first_name: string; 27 | last_name: string; 28 | email: string; 29 | phone: string; 30 | address: string; 31 | city: string; 32 | region: string; 33 | country: string; 34 | postal_code: string; 35 | deleted_at: string; 36 | organization_id: number; 37 | organization: Organization; 38 | } 39 | 40 | export interface Organization { 41 | id: number; 42 | name: string; 43 | email: string; 44 | phone: string; 45 | address: string; 46 | city: string; 47 | region: string; 48 | country: string; 49 | postal_code: string; 50 | deleted_at: string; 51 | contacts: Contact[]; 52 | } 53 | 54 | export type PaginatedData = { 55 | data: T[]; 56 | links: { 57 | first: string; 58 | last: string; 59 | prev: string | null; 60 | next: string | null; 61 | }; 62 | 63 | meta: { 64 | current_page: number; 65 | from: number; 66 | last_page: number; 67 | path: string; 68 | per_page: number; 69 | to: number; 70 | total: number; 71 | 72 | links: { 73 | url: null | string; 74 | label: string; 75 | active: boolean; 76 | }[]; 77 | }; 78 | }; 79 | 80 | export type PageProps< 81 | T extends Record = Record 82 | > = T & { 83 | auth: { 84 | user: User; 85 | }; 86 | flash: { 87 | success: string | null; 88 | error: string | null; 89 | }; 90 | ziggy: Config & { location: string }; 91 | }; 92 | -------------------------------------------------------------------------------- /resources/js/Pages/Organizations/Index.tsx: -------------------------------------------------------------------------------- 1 | import { Link, usePage } from '@inertiajs/react'; 2 | import MainLayout from '@/Layouts/MainLayout'; 3 | import FilterBar from '@/Components/FilterBar/FilterBar'; 4 | import Pagination from '@/Components/Pagination/Pagination'; 5 | import { Organization, PaginatedData } from '@/types'; 6 | import Table from '@/Components/Table/Table'; 7 | import { Trash2 } from 'lucide-react'; 8 | 9 | function Index() { 10 | const { organizations } = usePage<{ 11 | organizations: PaginatedData; 12 | }>().props; 13 | 14 | const { 15 | data, 16 | meta: { links } 17 | } = organizations; 18 | 19 | return ( 20 |
21 |

Organizations

22 |
23 | 24 | 28 | Create 29 | Organization 30 | 31 |
32 | ( 38 | <> 39 | {row.name} 40 | {row.deleted_at && ( 41 | 42 | )} 43 | 44 | ) 45 | }, 46 | { label: 'City', name: 'city' }, 47 | { label: 'Phone', name: 'phone', colSpan: 2 } 48 | ]} 49 | rows={data} 50 | getRowDetailsUrl={row => route('organizations.edit', row.id)} 51 | /> 52 | 53 | 54 | ); 55 | } 56 | 57 | /** 58 | * Persistent Layout (Inertia.js) 59 | * 60 | * [Learn more](https://inertiajs.com/pages#persistent-layouts) 61 | */ 62 | Index.layout = (page: React.ReactNode) => ( 63 | 64 | ); 65 | 66 | export default Index; 67 | -------------------------------------------------------------------------------- /resources/js/Pages/Contacts/Index.tsx: -------------------------------------------------------------------------------- 1 | import { Link, usePage } from '@inertiajs/react'; 2 | import MainLayout from '@/Layouts/MainLayout'; 3 | import Pagination from '@/Components/Pagination/Pagination'; 4 | import FilterBar from '@/Components/FilterBar/FilterBar'; 5 | import { Contact, PaginatedData } from '@/types'; 6 | import Table from '@/Components/Table/Table'; 7 | import { Trash2 } from 'lucide-react'; 8 | 9 | const Index = () => { 10 | const { contacts } = usePage<{ 11 | contacts: PaginatedData; 12 | }>().props; 13 | 14 | const { 15 | data, 16 | meta: { links } 17 | } = contacts; 18 | 19 | return ( 20 |
21 |

Contacts

22 |
23 | 24 | 28 | Create 29 | Contact 30 | 31 |
32 |
( 38 | <> 39 | {row.name} 40 | {row.deleted_at && ( 41 | 42 | )} 43 | 44 | ) 45 | }, 46 | { label: 'Organization', name: 'organization.name' }, 47 | { label: 'City', name: 'city' }, 48 | { label: 'Phone', name: 'phone', colSpan: 2 } 49 | ]} 50 | rows={data} 51 | getRowDetailsUrl={row => route('contacts.edit', row.id)} 52 | /> 53 | 54 | 55 | ); 56 | }; 57 | 58 | /** 59 | * Persistent Layout (Inertia.js) 60 | * 61 | * [Learn more](https://inertiajs.com/pages#persistent-layouts) 62 | */ 63 | Index.layout = (page: React.ReactNode) => ( 64 | 65 | ); 66 | 67 | export default Index; 68 | -------------------------------------------------------------------------------- /resources/js/Components/Pagination/Pagination.tsx: -------------------------------------------------------------------------------- 1 | import { Link } from '@inertiajs/react'; 2 | import classNames from 'classnames'; 3 | 4 | interface PaginationProps { 5 | links: PaginationItem[]; 6 | } 7 | 8 | export default function Pagination({ links = [] }: PaginationProps) { 9 | /** 10 | * If there are only 3 links, it means there are no previous or next pages. 11 | * So, we don't need to render the pagination. 12 | */ 13 | if (links.length === 3) return null; 14 | 15 | return ( 16 |
17 | {links?.map(link => { 18 | return link?.url === null ? ( 19 | 20 | ) : ( 21 | 22 | ); 23 | })} 24 |
25 | ); 26 | } 27 | 28 | interface PaginationItem { 29 | url: null | string; 30 | label: string; 31 | active: boolean; 32 | } 33 | 34 | function PaginationItem({ active, label, url }: PaginationItem) { 35 | const className = classNames( 36 | [ 37 | 'mr-1 mb-1', 38 | 'px-4 py-3', 39 | 'border border-solid border-gray-300 rounded', 40 | 'text-sm', 41 | 'hover:bg-white', 42 | 'focus:outline-none focus:border-indigo-700 focus:text-indigo-700' 43 | ], 44 | { 45 | 'bg-white': active 46 | } 47 | ); 48 | 49 | /** 50 | * Note: In general you should be aware when using `dangerouslySetInnerHTML`. 51 | * 52 | * In this case, `label` from the API is a string, so it's safe to use it. 53 | * It will be either `« Previous` or `Next »` 54 | */ 55 | return ( 56 | 57 | 58 | 59 | ); 60 | } 61 | 62 | function PageInactive({ label }: Pick) { 63 | const className = classNames( 64 | 'mr-1 mb-1 px-4 py-3 text-sm border rounded border-solid border-gray-300 text-gray' 65 | ); 66 | 67 | /** 68 | * Note: In general you should be aware when using `dangerouslySetInnerHTML`. 69 | * 70 | * In this case, `label` from the API is a string, so it's safe to use it. 71 | * It will be either `« Previous` or `Next »` 72 | */ 73 | return ( 74 |
75 | ); 76 | } 77 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "laravel/laravel", 3 | "type": "project", 4 | "description": "The Laravel Framework.", 5 | "keywords": [ 6 | "framework", 7 | "laravel" 8 | ], 9 | "license": "MIT", 10 | "require": { 11 | "php": "^8.2", 12 | "ext-exif": "*", 13 | "ext-gd": "*", 14 | "fakerphp/faker": "^1.23", 15 | "guzzlehttp/guzzle": "^7.2", 16 | "inertiajs/inertia-laravel": "^1.0", 17 | "laravel/framework": "^11.1", 18 | "laravel/sanctum": "^4.0", 19 | "laravel/tinker": "^2.9", 20 | "league/glide-symfony": "^2.0", 21 | "tightenco/ziggy": "^2.2" 22 | }, 23 | "require-dev": { 24 | "brianium/paratest": "^7.4", 25 | "laravel/pint": "^1.15", 26 | "laravel/sail": "^1.26", 27 | "mockery/mockery": "^1.6", 28 | "nunomaduro/collision": "^8.0", 29 | "phpunit/phpunit": "^11.0", 30 | "roave/security-advisories": "dev-latest", 31 | "spatie/laravel-ignition": "^2.4" 32 | }, 33 | "autoload": { 34 | "psr-4": { 35 | "App\\": "app/", 36 | "Database\\Factories\\": "database/factories/", 37 | "Database\\Seeders\\": "database/seeders/" 38 | } 39 | }, 40 | "autoload-dev": { 41 | "psr-4": { 42 | "Tests\\": "tests/" 43 | } 44 | }, 45 | "scripts": { 46 | "post-autoload-dump": [ 47 | "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump", 48 | "@php artisan package:discover --ansi" 49 | ], 50 | "post-update-cmd": [ 51 | "@php artisan vendor:publish --tag=laravel-assets --ansi --force" 52 | ], 53 | "post-root-package-install": [ 54 | "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"" 55 | ], 56 | "post-create-project-cmd": [ 57 | "@php artisan key:generate --ansi" 58 | ], 59 | "compile": [ 60 | "@php artisan migrate:fresh --seed" 61 | ] 62 | }, 63 | "extra": { 64 | "laravel": { 65 | "dont-discover": [] 66 | } 67 | }, 68 | "config": { 69 | "optimize-autoloader": true, 70 | "preferred-install": "dist", 71 | "sort-packages": true 72 | }, 73 | "minimum-stability": "dev", 74 | "prefer-stable": true 75 | } 76 | -------------------------------------------------------------------------------- /resources/js/Pages/Users/Index.tsx: -------------------------------------------------------------------------------- 1 | import { Link, usePage } from '@inertiajs/react'; 2 | import MainLayout from '@/Layouts/MainLayout'; 3 | import FilterBar from '@/Components/FilterBar/FilterBar'; 4 | import Pagination from '@/Components/Pagination/Pagination'; 5 | import { PaginatedData, User } from '@/types'; 6 | import Table from '@/Components/Table/Table'; 7 | import { Trash2 } from 'lucide-react'; 8 | 9 | const Index = () => { 10 | const { users } = usePage<{ users: PaginatedData }>().props; 11 | 12 | const { 13 | data, 14 | meta: { links } 15 | } = users; 16 | 17 | return ( 18 |
19 |

Users

20 |
21 | 22 | 26 | Create 27 | User 28 | 29 |
30 |
( 37 | <> 38 | {row.photo && ( 39 | {row.name} 44 | )} 45 | <>{row.name} 46 | {row.deleted_at && ( 47 | 48 | )} 49 | 50 | ) 51 | }, 52 | { label: 'Email', name: 'email' }, 53 | { 54 | label: 'Role', 55 | name: 'owner', 56 | colSpan: 2, 57 | renderCell: row => (row.owner ? 'Owner' : 'User') 58 | } 59 | ]} 60 | rows={data} 61 | getRowDetailsUrl={row => route('users.edit', row.id)} 62 | /> 63 | 64 | 65 | ); 66 | }; 67 | 68 | /** 69 | * Persistent Layout (Inertia.js) 70 | * 71 | * [Learn more](https://inertiajs.com/pages#persistent-layouts) 72 | */ 73 | Index.layout = (page: React.ReactNode) => ( 74 | 75 | ); 76 | 77 | export default Index; 78 | -------------------------------------------------------------------------------- /app/Http/Requests/Auth/LoginRequest.php: -------------------------------------------------------------------------------- 1 | 'required|string|email', 29 | 'password' => 'required|string', 30 | ]; 31 | } 32 | 33 | /** 34 | * Attempt to authenticate the request's credentials. 35 | * 36 | * 37 | * @throws \Illuminate\Validation\ValidationException 38 | */ 39 | public function authenticate(): void 40 | { 41 | $this->ensureIsNotRateLimited(); 42 | 43 | if (! Auth::attempt($this->only('email', 'password'), $this->boolean('remember'))) { 44 | RateLimiter::hit($this->throttleKey()); 45 | 46 | throw ValidationException::withMessages([ 47 | 'email' => __('auth.failed'), 48 | ]); 49 | } 50 | 51 | RateLimiter::clear($this->throttleKey()); 52 | } 53 | 54 | /** 55 | * Ensure the login request is not rate limited. 56 | * 57 | * 58 | * @throws \Illuminate\Validation\ValidationException 59 | */ 60 | public function ensureIsNotRateLimited(): void 61 | { 62 | if (! RateLimiter::tooManyAttempts($this->throttleKey(), 5)) { 63 | return; 64 | } 65 | 66 | event(new Lockout($this)); 67 | 68 | $seconds = RateLimiter::availableIn($this->throttleKey()); 69 | 70 | throw ValidationException::withMessages([ 71 | 'email' => trans('auth.throttle', [ 72 | 'seconds' => $seconds, 73 | 'minutes' => ceil($seconds / 60), 74 | ]), 75 | ]); 76 | } 77 | 78 | /** 79 | * Get the rate limiting throttle key for the request. 80 | */ 81 | public function throttleKey(): string 82 | { 83 | return Str::lower($this->input('email')).'|'.$this->ip(); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /resources/js/Components/Form/FileInput.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef, ComponentProps } from 'react'; 2 | import { fileSize } from '@/utils'; 3 | import { Omit } from 'lodash'; 4 | 5 | interface FileInputProps extends Omit, 'onChange'> { 6 | error?: string; 7 | onChange?: (file: File | null) => void; 8 | } 9 | 10 | export default function FileInput({ name, error, onChange }: FileInputProps) { 11 | const fileInput = useRef(null); 12 | const [file, setFile] = useState(null); 13 | 14 | function handleBrowse() { 15 | fileInput?.current?.click(); 16 | } 17 | 18 | function handleRemove() { 19 | setFile(null); 20 | onChange?.(null); 21 | 22 | // fileInput?.current?.value = ''; 23 | } 24 | 25 | function handleChange(e: React.FormEvent) { 26 | const files = e.currentTarget?.files as FileList; 27 | const file = files[0] || null; 28 | 29 | setFile(file); 30 | onChange?.(file); 31 | } 32 | 33 | return ( 34 |
39 | 46 | {!file && ( 47 |
48 | 49 |
50 | )} 51 | {file && ( 52 |
53 |
54 | {file?.name} 55 | 56 | ({fileSize(file?.size)}) 57 | 58 |
59 | 60 |
61 | )} 62 |
63 | ); 64 | } 65 | 66 | interface BrowseButtonProps extends ComponentProps<'button'> { 67 | text: string; 68 | } 69 | 70 | function BrowseButton({ text, onClick, ...props }: BrowseButtonProps) { 71 | return ( 72 | 80 | ); 81 | } 82 | -------------------------------------------------------------------------------- /resources/js/Components/Header/BottomHeader.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Link, usePage } from '@inertiajs/react'; 3 | import { PageProps } from '@/types'; 4 | import { ChevronDown } from 'lucide-react'; 5 | 6 | export default () => { 7 | const { auth } = usePage().props; 8 | const [menuOpened, setMenuOpened] = useState(false); 9 | 10 | return ( 11 |
12 |
{auth.user.account.name}
13 |
14 |
setMenuOpened(true)} 17 | > 18 |
19 | {auth.user.first_name} 20 | {auth.user.last_name} 21 |
22 | 26 |
27 |
28 |
29 | setMenuOpened(false)} 33 | > 34 | My Profile 35 | 36 | setMenuOpened(false)} 40 | > 41 | Manage Users 42 | 43 | 49 | Logout 50 | 51 |
52 |
{ 54 | setMenuOpened(false); 55 | }} 56 | className="fixed inset-0 z-10 bg-black opacity-25" 57 | >
58 |
59 |
60 |
61 | ); 62 | }; 63 | -------------------------------------------------------------------------------- /app/Http/Controllers/OrganizationsController.php: -------------------------------------------------------------------------------- 1 | Request::all('search', 'trashed'), 23 | 'organizations' => new OrganizationCollection( 24 | Auth::user()->account->organizations() 25 | ->orderBy('name') 26 | ->filter(Request::only('search', 'trashed')) 27 | ->paginate() 28 | ->appends(Request::all()) 29 | ), 30 | ]); 31 | } 32 | 33 | public function create(): Response 34 | { 35 | return Inertia::render('Organizations/Create'); 36 | } 37 | 38 | public function store(OrganizationStoreRequest $request): RedirectResponse 39 | { 40 | Auth::user()->account->organizations()->create( 41 | $request->validated() 42 | ); 43 | 44 | return Redirect::route('organizations')->with('success', 'Organization created.'); 45 | } 46 | 47 | public function edit(Organization $organization): Response 48 | { 49 | return Inertia::render('Organizations/Edit', [ 50 | 'organization' => new OrganizationResource($organization), 51 | ]); 52 | } 53 | 54 | public function update(Organization $organization, OrganizationUpdateRequest $request): RedirectResponse 55 | { 56 | $organization->update( 57 | $request->validated() 58 | ); 59 | 60 | return Redirect::back()->with('success', 'Organization updated.'); 61 | } 62 | 63 | public function destroy(Organization $organization): RedirectResponse 64 | { 65 | $organization->delete(); 66 | 67 | return Redirect::back()->with('success', 'Organization deleted.'); 68 | } 69 | 70 | public function restore(Organization $organization): RedirectResponse 71 | { 72 | $organization->restore(); 73 | 74 | return Redirect::back()->with('success', 'Organization restored.'); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /app/Http/Controllers/UsersController.php: -------------------------------------------------------------------------------- 1 | Request::all('search', 'role', 'trashed'), 24 | 'users' => new UserCollection( 25 | Auth::user()->account->users() 26 | ->orderByName() 27 | ->filter(Request::only('search', 'role', 'trashed')) 28 | ->paginate() 29 | ->appends(Request::all()) 30 | ), 31 | ]); 32 | } 33 | 34 | public function create(): Response 35 | { 36 | return Inertia::render('Users/Create'); 37 | } 38 | 39 | public function store(UserStoreRequest $request): RedirectResponse 40 | { 41 | $user = Auth::user()->account->users()->create( 42 | $request->validated() 43 | ); 44 | 45 | if ($request->hasFile('photo')) { 46 | $user->update([ 47 | 'photo' => $request->file('photo')->store('users'), 48 | ]); 49 | } 50 | 51 | return Redirect::route('users')->with('success', 'User created.'); 52 | } 53 | 54 | public function edit(User $user): Response 55 | { 56 | return Inertia::render('Users/Edit', [ 57 | 'user' => new UserResource($user), 58 | ]); 59 | } 60 | 61 | public function update(User $user, UserUpdateRequest $request): RedirectResponse 62 | { 63 | $user->update( 64 | $request->validated() 65 | ); 66 | 67 | if ($request->hasFile('photo')) { 68 | $user->update([ 69 | 'photo' => $request->file('photo')->store('users'), 70 | ]); 71 | } 72 | 73 | return Redirect::back()->with('success', 'User updated.'); 74 | } 75 | 76 | public function destroy(User $user, UserDeleteRequest $request): RedirectResponse 77 | { 78 | $user->delete(); 79 | 80 | return Redirect::back()->with('success', 'User deleted.'); 81 | } 82 | 83 | public function restore(User $user): RedirectResponse 84 | { 85 | $user->restore(); 86 | 87 | return Redirect::back()->with('success', 'User restored.'); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /resources/js/Components/Table/Table.tsx: -------------------------------------------------------------------------------- 1 | import { Link } from '@inertiajs/react'; 2 | import get from 'lodash/get'; 3 | import { ChevronRight } from 'lucide-react'; 4 | 5 | interface TableProps { 6 | columns: { 7 | name: string; 8 | label: string; 9 | colSpan?: number; 10 | renderCell?: (row: T) => React.ReactNode; 11 | }[]; 12 | rows: T[]; 13 | getRowDetailsUrl?: (row: T) => string; 14 | } 15 | 16 | export default function Table({ 17 | columns = [], 18 | rows = [], 19 | getRowDetailsUrl 20 | }: TableProps) { 21 | return ( 22 |
23 |
24 | 25 | 26 | {columns?.map(column => ( 27 | 34 | ))} 35 | 36 | 37 | 38 | {/* Empty state */} 39 | {rows?.length === 0 && ( 40 | 41 | 47 | 48 | )} 49 | {rows?.map((row, index) => { 50 | return ( 51 | 55 | {columns.map(column => { 56 | return ( 57 | 68 | ); 69 | })} 70 | 78 | 79 | ); 80 | })} 81 | 82 |
32 | {column.label} 33 |
45 | No data found. 46 |
58 | 63 | {column.renderCell?.(row) ?? 64 | get(row, column.name) ?? 65 | 'N/A'} 66 | 67 | 71 | 75 | 76 | 77 |
83 |
84 | ); 85 | } 86 | -------------------------------------------------------------------------------- /tests/Feature/UsersTest.php: -------------------------------------------------------------------------------- 1 | 'Acme Corporation']); 17 | 18 | $this->user = User::factory()->make([ 19 | 'account_id' => $account->id, 20 | 'first_name' => 'John', 21 | 'last_name' => 'Doe', 22 | 'email' => 'johndoe@example.com', 23 | 'owner' => true, 24 | ]); 25 | } 26 | 27 | public function test_can_view_users() 28 | { 29 | User::factory()->count(5)->create(['account_id' => 1]); 30 | 31 | $this->actingAs($this->user) 32 | ->get('/users') 33 | ->assertStatus(200) 34 | ->assertInertia(function (Assert $page) { 35 | $page->component('Users/Index'); 36 | $page->has('users.data', 5, function (Assert $page) { 37 | $page->hasAll(['id', 'name', 'email', 'owner', 'photo', 'deleted_at']); 38 | }); 39 | }); 40 | } 41 | 42 | public function test_can_search_for_users() 43 | { 44 | User::factory()->count(5)->create(['account_id' => 1]); 45 | 46 | User::first()->update([ 47 | 'first_name' => 'Greg', 48 | 'last_name' => 'Andersson', 49 | ]); 50 | 51 | $this->actingAs($this->user) 52 | ->get('/users?search=Greg') 53 | ->assertStatus(200) 54 | ->assertInertia(function (Assert $page) { 55 | $page->where('filters.search', 'Greg'); 56 | $page->has('users.data', 1, function (Assert $page) { 57 | $page->where('name', 'Greg Andersson')->etc(); 58 | }); 59 | }); 60 | } 61 | 62 | public function test_cannot_view_deleted_users() 63 | { 64 | User::factory()->count(5)->create(['account_id' => 1]); 65 | User::first()->delete(); 66 | 67 | $this->actingAs($this->user) 68 | ->get('/users') 69 | ->assertStatus(200) 70 | ->assertInertia(function (Assert $page) { 71 | $page->has('users.data', 4); 72 | }); 73 | } 74 | 75 | public function test_can_filter_to_view_deleted_users() 76 | { 77 | User::factory()->count(5)->create(['account_id' => 1]); 78 | User::first()->delete(); 79 | 80 | $this->actingAs($this->user) 81 | ->get('/users?trashed=with') 82 | ->assertStatus(200) 83 | ->assertInertia(function (Assert $page) { 84 | $page->where('filters.trashed', 'with'); 85 | $page->has('users.data', 5); 86 | }); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /app/Http/Controllers/ContactsController.php: -------------------------------------------------------------------------------- 1 | Request::all('search', 'trashed'), 24 | 'contacts' => new ContactCollection( 25 | Auth::user()->account->contacts() 26 | ->with('organization') 27 | ->orderByName() 28 | ->filter(Request::only('search', 'trashed')) 29 | ->paginate() 30 | ->appends(Request::all()) 31 | ), 32 | ]); 33 | } 34 | 35 | public function create(): Response 36 | { 37 | return Inertia::render('Contacts/Create', [ 38 | 'organizations' => new UserOrganizationCollection( 39 | Auth::user()->account->organizations() 40 | ->orderBy('name') 41 | ->get() 42 | ), 43 | ]); 44 | } 45 | 46 | public function store(ContactStoreRequest $request): RedirectResponse 47 | { 48 | Auth::user()->account->contacts()->create( 49 | $request->validated() 50 | ); 51 | 52 | return Redirect::route('contacts')->with('success', 'Contact created.'); 53 | } 54 | 55 | public function edit(Contact $contact): Response 56 | { 57 | return Inertia::render('Contacts/Edit', [ 58 | 'contact' => new ContactResource($contact), 59 | 'organizations' => new UserOrganizationCollection( 60 | Auth::user()->account->organizations() 61 | ->orderBy('name') 62 | ->get() 63 | ), 64 | ]); 65 | } 66 | 67 | public function update(Contact $contact, ContactUpdateRequest $request): RedirectResponse 68 | { 69 | $contact->update( 70 | $request->validated() 71 | ); 72 | 73 | return Redirect::back()->with('success', 'Contact updated.'); 74 | } 75 | 76 | public function destroy(Contact $contact): RedirectResponse 77 | { 78 | $contact->delete(); 79 | 80 | return Redirect::back()->with('success', 'Contact deleted.'); 81 | } 82 | 83 | public function restore(Contact $contact): RedirectResponse 84 | { 85 | $contact->restore(); 86 | 87 | return Redirect::back()->with('success', 'Contact restored.'); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /tests/Feature/ContactsTest.php: -------------------------------------------------------------------------------- 1 | 'Acme Corporation']); 18 | 19 | $this->user = User::factory()->make([ 20 | 'account_id' => $account->id, 21 | 'first_name' => 'John', 22 | 'last_name' => 'Doe', 23 | 'email' => 'johndoe@example.com', 24 | 'owner' => true, 25 | ]); 26 | } 27 | 28 | public function test_can_view_contacts() 29 | { 30 | $this->user->account->contacts()->saveMany( 31 | Contact::factory()->count(5)->make() 32 | ); 33 | 34 | $this->actingAs($this->user) 35 | ->get('/contacts') 36 | ->assertStatus(200) 37 | ->assertInertia(function (Assert $page) { 38 | $page->component('Contacts/Index'); 39 | $page->has('contacts.data', 5, function (Assert $page) { 40 | $page->hasAll(['id', 'name', 'phone', 'city', 'deleted_at', 'organization']); 41 | }); 42 | }); 43 | } 44 | 45 | public function test_can_search_for_contacts() 46 | { 47 | $this->user->account->contacts()->saveMany( 48 | Contact::factory()->count(5)->make() 49 | )->first()->update([ 50 | 'first_name' => 'Greg', 51 | 'last_name' => 'Andersson', 52 | ]); 53 | 54 | $this->actingAs($this->user) 55 | ->get('/contacts?search=Greg') 56 | ->assertStatus(200) 57 | ->assertInertia(function (Assert $page) { 58 | $page->where('filters.search', 'Greg'); 59 | $page->has('contacts.data', 1, function (Assert $page) { 60 | $page->where('name', 'Greg Andersson')->etc(); 61 | }); 62 | }); 63 | } 64 | 65 | public function test_cannot_view_deleted_contacts() 66 | { 67 | $this->user->account->contacts()->saveMany( 68 | Contact::factory()->count(5)->make() 69 | )->first()->delete(); 70 | 71 | $this->actingAs($this->user) 72 | ->get('/contacts') 73 | ->assertStatus(200) 74 | ->assertInertia(function (Assert $page) { 75 | $page->has('contacts.data', 4); 76 | }); 77 | } 78 | 79 | public function test_can_filter_to_view_deleted_contacts() 80 | { 81 | $this->user->account->contacts()->saveMany( 82 | Contact::factory()->count(5)->make() 83 | )->first()->delete(); 84 | 85 | $this->actingAs($this->user) 86 | ->get('/contacts?trashed=with') 87 | ->assertStatus(200) 88 | ->assertInertia(function (Assert $page) { 89 | $page->where('filters.trashed', 'with'); 90 | $page->has('contacts.data', 5); 91 | }); 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /tests/Feature/OrganizationsTest.php: -------------------------------------------------------------------------------- 1 | 'Acme Corporation']); 18 | 19 | $this->user = User::factory()->make([ 20 | 'account_id' => $account->id, 21 | 'first_name' => 'John', 22 | 'last_name' => 'Doe', 23 | 'email' => 'johndoe@example.com', 24 | 'owner' => true, 25 | ]); 26 | } 27 | 28 | public function test_can_view_organizations() 29 | { 30 | $this->user->account->organizations()->saveMany( 31 | Organization::factory()->count(5)->make() 32 | ); 33 | 34 | $this->actingAs($this->user) 35 | ->get('/organizations') 36 | ->assertStatus(200) 37 | ->assertInertia(function (Assert $page) { 38 | $page->component('Organizations/Index'); 39 | $page->has('organizations.data', 5, function (Assert $page) { 40 | $page->hasAll(['id', 'name', 'phone', 'city', 'deleted_at']); 41 | }); 42 | }); 43 | } 44 | 45 | public function test_can_search_for_organizations() 46 | { 47 | $this->user->account->organizations()->saveMany( 48 | Organization::factory()->count(5)->make() 49 | )->first()->update(['name' => 'Some Big Fancy Company Name']); 50 | 51 | $this->actingAs($this->user) 52 | ->get('/organizations?search=Some Big Fancy Company Name') 53 | ->assertStatus(200) 54 | ->assertInertia(function (Assert $page) { 55 | $page->where('filters.search', 'Some Big Fancy Company Name'); 56 | $page->has('organizations.data', 1, function (Assert $page) { 57 | $page->where('name', 'Some Big Fancy Company Name')->etc(); 58 | }); 59 | }); 60 | } 61 | 62 | public function test_cannot_view_deleted_organizations() 63 | { 64 | $this->user->account->organizations()->saveMany( 65 | Organization::factory()->count(5)->make() 66 | )->first()->delete(); 67 | 68 | $this->actingAs($this->user) 69 | ->get('/organizations') 70 | ->assertStatus(200) 71 | ->assertInertia(function (Assert $page) { 72 | $page->has('organizations.data', 4); 73 | }); 74 | } 75 | 76 | public function test_can_filter_to_view_deleted_organizations() 77 | { 78 | $this->user->account->organizations()->saveMany( 79 | Organization::factory()->count(5)->make() 80 | )->first()->delete(); 81 | 82 | $this->actingAs($this->user) 83 | ->get('/organizations?trashed=with') 84 | ->assertStatus(200) 85 | ->assertInertia(function (Assert $page) { 86 | $page->where('filters.trashed', 'with'); 87 | $page->has('organizations.data', 5); 88 | }); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /config/sanctum.php: -------------------------------------------------------------------------------- 1 | explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf( 19 | '%s%s', 20 | 'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1', 21 | Sanctum::currentApplicationUrlWithPort() 22 | ))), 23 | 24 | /* 25 | |-------------------------------------------------------------------------- 26 | | Sanctum Guards 27 | |-------------------------------------------------------------------------- 28 | | 29 | | This array contains the authentication guards that will be checked when 30 | | Sanctum is trying to authenticate a request. If none of these guards 31 | | are able to authenticate the request, Sanctum will use the bearer 32 | | token that's present on an incoming request for authentication. 33 | | 34 | */ 35 | 36 | 'guard' => ['web'], 37 | 38 | /* 39 | |-------------------------------------------------------------------------- 40 | | Expiration Minutes 41 | |-------------------------------------------------------------------------- 42 | | 43 | | This value controls the number of minutes until an issued token will be 44 | | considered expired. This will override any values set in the token's 45 | | "expires_at" attribute, but first-party sessions are not affected. 46 | | 47 | */ 48 | 49 | 'expiration' => null, 50 | 51 | /* 52 | |-------------------------------------------------------------------------- 53 | | Token Prefix 54 | |-------------------------------------------------------------------------- 55 | | 56 | | Sanctum can prefix new tokens in order to take advantage of numerous 57 | | security scanning initiatives maintained by open source platforms 58 | | that notify developers if they commit tokens into repositories. 59 | | 60 | | See: https://docs.github.com/en/code-security/secret-scanning/about-secret-scanning 61 | | 62 | */ 63 | 64 | 'token_prefix' => env('SANCTUM_TOKEN_PREFIX', ''), 65 | 66 | /* 67 | |-------------------------------------------------------------------------- 68 | | Sanctum Middleware 69 | |-------------------------------------------------------------------------- 70 | | 71 | | When authenticating your first-party SPA with Sanctum you may need to 72 | | customize some of the middleware Sanctum uses while processing the 73 | | request. You may change the middleware listed below as required. 74 | | 75 | */ 76 | 77 | 'middleware' => [ 78 | 'authenticate_session' => Laravel\Sanctum\Http\Middleware\AuthenticateSession::class, 79 | 'encrypt_cookies' => Illuminate\Cookie\Middleware\EncryptCookies::class, 80 | 'validate_csrf_token' => Illuminate\Foundation\Http\Middleware\ValidateCsrfToken::class, 81 | ], 82 | 83 | ]; 84 | -------------------------------------------------------------------------------- /resources/js/Pages/Auth/Login.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Head } from '@inertiajs/react'; 3 | import { useForm } from '@inertiajs/react'; 4 | import Logo from '@/Components/Logo/Logo'; 5 | import LoadingButton from '@/Components/Button/LoadingButton'; 6 | import TextInput from '@/Components/Form/TextInput'; 7 | import FieldGroup from '@/Components/Form/FieldGroup'; 8 | import { CheckboxInput } from '@/Components/Form/CheckboxInput'; 9 | 10 | export default function LoginPage() { 11 | const { data, setData, errors, post, processing } = useForm({ 12 | email: 'johndoe@example.com', 13 | password: 'secret', 14 | remember: true 15 | }); 16 | 17 | function handleSubmit(e: React.FormEvent) { 18 | e.preventDefault(); 19 | 20 | post(route('login.store')); 21 | } 22 | 23 | return ( 24 |
25 | 26 | 27 |
28 | 32 |
36 |
37 |

Welcome Back!

38 |
39 |
40 | 41 | setData('email', e.target.value)} 47 | /> 48 | 49 | 50 | 55 | setData('password', e.target.value)} 60 | /> 61 | 62 | 63 | 64 | setData('remember', e.target.checked)} 70 | /> 71 | 72 |
73 |
74 |
75 | 76 | Forgot password? 77 | 78 | 83 | Login 84 | 85 |
86 | 87 |
88 |
89 | ); 90 | } 91 | -------------------------------------------------------------------------------- /app/Models/User.php: -------------------------------------------------------------------------------- 1 | 21 | */ 22 | protected $fillable = [ 23 | 'name', 24 | 'first_name', 25 | 'last_name', 26 | 'email', 27 | 'password', 28 | 'photo', 29 | ]; 30 | 31 | /** 32 | * The attributes that should be hidden for serialization. 33 | * 34 | * @var array 35 | */ 36 | protected $hidden = [ 37 | 'password', 38 | 'remember_token', 39 | ]; 40 | 41 | /** 42 | * Get the attributes that should be cast. 43 | * 44 | * @return array 45 | */ 46 | protected function casts(): array 47 | { 48 | return [ 49 | 'owner' => 'boolean', 50 | 'email_verified_at' => 'datetime', 51 | ]; 52 | } 53 | 54 | public function resolveRouteBinding($value, $field = null) 55 | { 56 | return $this->where($field ?? 'id', $value)->withTrashed()->firstOrFail(); 57 | } 58 | 59 | public function account(): BelongsTo 60 | { 61 | return $this->belongsTo(Account::class); 62 | } 63 | 64 | public function getNameAttribute() 65 | { 66 | return $this->first_name.' '.$this->last_name; 67 | } 68 | 69 | public function setPasswordAttribute($password) 70 | { 71 | $this->attributes['password'] = Hash::needsRehash($password) ? Hash::make($password) : $password; 72 | } 73 | 74 | public function isDemoUser() 75 | { 76 | return $this->email === 'johndoe@example.com'; 77 | } 78 | 79 | public function scopeOrderByName($query) 80 | { 81 | $query->orderBy('last_name')->orderBy('first_name'); 82 | } 83 | 84 | public function scopeWhereRole($query, $role) 85 | { 86 | switch ($role) { 87 | case 'user': return $query->where('owner', false); 88 | case 'owner': return $query->where('owner', true); 89 | } 90 | } 91 | 92 | public function scopeFilter($query, array $filters) 93 | { 94 | $query->when($filters['search'] ?? null, function ($query, $search) { 95 | $query->where(function ($query) use ($search) { 96 | $query->where('first_name', 'like', '%'.$search.'%') 97 | ->orWhere('last_name', 'like', '%'.$search.'%') 98 | ->orWhere('email', 'like', '%'.$search.'%'); 99 | }); 100 | })->when($filters['role'] ?? null, function ($query, $role) { 101 | $query->whereRole($role); 102 | })->when($filters['trashed'] ?? null, function ($query, $trashed) { 103 | if ($trashed === 'with') { 104 | $query->withTrashed(); 105 | } elseif ($trashed === 'only') { 106 | $query->onlyTrashed(); 107 | } 108 | }); 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /resources/js/Components/FilterBar/FilterBar.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | import { usePage, router } from '@inertiajs/react'; 3 | import { usePrevious } from 'react-use'; 4 | import SelectInput from '@/Components/Form/SelectInput'; 5 | import pickBy from 'lodash/pickBy'; 6 | import { ChevronDown } from 'lucide-react'; 7 | import FieldGroup from '@/Components/Form/FieldGroup'; 8 | import TextInput from '@/Components/Form/TextInput'; 9 | 10 | export default function FilterBar() { 11 | const { filters } = usePage<{ 12 | filters: { role?: string; search?: string; trashed?: string }; 13 | }>().props; 14 | 15 | const [opened, setOpened] = useState(false); 16 | 17 | const [values, setValues] = useState({ 18 | role: filters.role || '', // role is used only on users page 19 | search: filters.search || '', 20 | trashed: filters.trashed || '' 21 | }); 22 | 23 | const prevValues = usePrevious(values); 24 | 25 | function reset() { 26 | setValues({ 27 | role: '', 28 | search: '', 29 | trashed: '' 30 | }); 31 | } 32 | 33 | useEffect(() => { 34 | // https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state 35 | if (prevValues) { 36 | const query = Object.keys(pickBy(values)).length ? pickBy(values) : {}; 37 | 38 | router.get(route(route().current() as string), query, { 39 | replace: true, 40 | preserveState: true 41 | }); 42 | } 43 | }, [values]); 44 | 45 | function handleChange( 46 | e: React.ChangeEvent 47 | ) { 48 | const name = e.target.name; 49 | const value = e.target.value; 50 | 51 | setValues(values => ({ 52 | ...values, 53 | [name]: value 54 | })); 55 | 56 | if (opened) setOpened(false); 57 | } 58 | 59 | return ( 60 |
61 |
62 |
66 |
setOpened(false)} 68 | className="fixed inset-0 z-20 bg-black opacity-25" 69 | /> 70 |
71 | {filters.hasOwnProperty('role') && ( 72 | 73 | 83 | 84 | )} 85 | 86 | 96 | 97 |
98 |
99 | 108 | 116 |
117 | 124 |
125 | ); 126 | } 127 | -------------------------------------------------------------------------------- /routes/web.php: -------------------------------------------------------------------------------- 1 | name('login') 27 | ->middleware('guest'); 28 | 29 | Route::post('login', [LoginController::class, 'store']) 30 | ->name('login.store') 31 | ->middleware('guest'); 32 | 33 | Route::delete('logout', [LoginController::class, 'destroy']) 34 | ->name('logout'); 35 | 36 | // Dashboard 37 | 38 | Route::get('/', [DashboardController::class, 'index']) 39 | ->name('dashboard') 40 | ->middleware('auth'); 41 | 42 | // Users 43 | 44 | Route::get('users', [UsersController::class, 'index']) 45 | ->name('users') 46 | ->middleware('auth'); 47 | 48 | Route::get('users/create', [UsersController::class, 'create']) 49 | ->name('users.create') 50 | ->middleware('auth'); 51 | 52 | Route::post('users', [UsersController::class, 'store']) 53 | ->name('users.store') 54 | ->middleware('auth'); 55 | 56 | Route::get('users/{user}/edit', [UsersController::class, 'edit']) 57 | ->name('users.edit') 58 | ->middleware('auth'); 59 | 60 | Route::put('users/{user}', [UsersController::class, 'update']) 61 | ->name('users.update') 62 | ->middleware('auth'); 63 | 64 | Route::delete('users/{user}', [UsersController::class, 'destroy']) 65 | ->name('users.destroy') 66 | ->middleware('auth'); 67 | 68 | Route::put('users/{user}/restore', [UsersController::class, 'restore']) 69 | ->name('users.restore') 70 | ->middleware('auth'); 71 | 72 | // Organizations 73 | 74 | Route::get('organizations', [OrganizationsController::class, 'index']) 75 | ->name('organizations') 76 | ->middleware('auth'); 77 | 78 | Route::get('organizations/create', [OrganizationsController::class, 'create']) 79 | ->name('organizations.create') 80 | ->middleware('auth'); 81 | 82 | Route::post('organizations', [OrganizationsController::class, 'store']) 83 | ->name('organizations.store') 84 | ->middleware('auth'); 85 | 86 | Route::get('organizations/{organization}/edit', [OrganizationsController::class, 'edit']) 87 | ->name('organizations.edit') 88 | ->middleware('auth'); 89 | 90 | Route::put('organizations/{organization}', [OrganizationsController::class, 'update']) 91 | ->name('organizations.update') 92 | ->middleware('auth'); 93 | 94 | Route::delete('organizations/{organization}', [OrganizationsController::class, 'destroy']) 95 | ->name('organizations.destroy') 96 | ->middleware('auth'); 97 | 98 | Route::put('organizations/{organization}/restore', [OrganizationsController::class, 'restore']) 99 | ->name('organizations.restore') 100 | ->middleware('auth'); 101 | 102 | // Contacts 103 | 104 | Route::get('contacts', [ContactsController::class, 'index']) 105 | ->name('contacts') 106 | ->middleware('auth'); 107 | 108 | Route::get('contacts/create', [ContactsController::class, 'create']) 109 | ->name('contacts.create') 110 | ->middleware('auth'); 111 | 112 | Route::post('contacts', [ContactsController::class, 'store']) 113 | ->name('contacts.store') 114 | ->middleware('auth'); 115 | 116 | Route::get('contacts/{contact}/edit', [ContactsController::class, 'edit']) 117 | ->name('contacts.edit') 118 | ->middleware('auth'); 119 | 120 | Route::put('contacts/{contact}', [ContactsController::class, 'update']) 121 | ->name('contacts.update') 122 | ->middleware('auth'); 123 | 124 | Route::delete('contacts/{contact}', [ContactsController::class, 'destroy']) 125 | ->name('contacts.destroy') 126 | ->middleware('auth'); 127 | 128 | Route::put('contacts/{contact}/restore', [ContactsController::class, 'restore']) 129 | ->name('contacts.restore') 130 | ->middleware('auth'); 131 | 132 | // Reports 133 | 134 | Route::get('reports', [ReportsController::class, 'index']) 135 | ->name('reports') 136 | ->middleware('auth'); 137 | 138 | // Images 139 | 140 | Route::get('/img/{path}', [ImagesController::class, 'show']) 141 | ->where('path', '.*') 142 | ->name('image'); 143 | -------------------------------------------------------------------------------- /resources/js/Pages/Users/Create.tsx: -------------------------------------------------------------------------------- 1 | import { Link, useForm } from '@inertiajs/react'; 2 | import MainLayout from '@/Layouts/MainLayout'; 3 | import LoadingButton from '@/Components/Button/LoadingButton'; 4 | import TextInput from '@/Components/Form/TextInput'; 5 | import SelectInput from '@/Components/Form/SelectInput'; 6 | import FileInput from '@/Components/Form/FileInput'; 7 | import FieldGroup from '@/Components/Form/FieldGroup'; 8 | 9 | const Create = () => { 10 | const { data, setData, errors, post, processing } = useForm({ 11 | first_name: '', 12 | last_name: '', 13 | email: '', 14 | password: '', 15 | owner: '0', 16 | photo: '' 17 | }); 18 | 19 | function handleSubmit(e: React.FormEvent) { 20 | e.preventDefault(); 21 | post(route('users.store')); 22 | } 23 | 24 | return ( 25 |
26 |
27 |

28 | 32 | Users 33 | 34 | / Create 35 |

36 |
37 |
38 |
39 |
40 | 45 | setData('first_name', e.target.value)} 50 | /> 51 | 52 | 53 | 58 | setData('last_name', e.target.value)} 63 | /> 64 | 65 | 66 | 67 | setData('email', e.target.value)} 73 | /> 74 | 75 | 76 | 81 | setData('password', e.target.value)} 87 | /> 88 | 89 | 90 | 91 | setData('owner', e.target.value)} 96 | options={[ 97 | { value: '1', label: 'Yes' }, 98 | { value: '0', label: 'No' } 99 | ]} 100 | /> 101 | 102 | 103 | 104 | setData('photo', photo as unknown as string)} 110 | /> 111 | 112 |
113 |
114 | 119 | Create User 120 | 121 |
122 |
123 |
124 |
125 | ); 126 | }; 127 | 128 | /** 129 | * Persistent Layout (Inertia.js) 130 | * 131 | * [Learn more](https://inertiajs.com/pages#persistent-layouts) 132 | */ 133 | Create.layout = (page: React.ReactNode) => ( 134 | 135 | ); 136 | 137 | export default Create; 138 | -------------------------------------------------------------------------------- /resources/js/Components/Logo/Logo.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface LogoProps extends React.SVGProps { 4 | // 5 | } 6 | 7 | export default function Logo(props: LogoProps) { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /resources/js/Pages/Organizations/Create.tsx: -------------------------------------------------------------------------------- 1 | import { Link, useForm } from '@inertiajs/react'; 2 | import MainLayout from '@/Layouts/MainLayout'; 3 | import LoadingButton from '@/Components/Button/LoadingButton'; 4 | import TextInput from '@/Components/Form/TextInput'; 5 | import SelectInput from '@/Components/Form/SelectInput'; 6 | import FieldGroup from '@/Components/Form/FieldGroup'; 7 | 8 | const Create = () => { 9 | const { data, setData, errors, post, processing } = useForm({ 10 | name: '', 11 | email: '', 12 | phone: '', 13 | address: '', 14 | city: '', 15 | region: '', 16 | country: '', 17 | postal_code: '' 18 | }); 19 | 20 | function handleSubmit(e: React.FormEvent) { 21 | e.preventDefault(); 22 | post(route('organizations.store')); 23 | } 24 | 25 | return ( 26 |
27 |

28 | 32 | Organizations 33 | 34 | / Create 35 |

36 |
37 |
38 |
39 | 40 | setData('name', e.target.value)} 45 | /> 46 | 47 | 48 | 49 | setData('email', e.target.value)} 55 | /> 56 | 57 | 58 | 59 | setData('phone', e.target.value)} 64 | /> 65 | 66 | 67 | 68 | setData('address', e.target.value)} 73 | /> 74 | 75 | 76 | 77 | setData('city', e.target.value)} 82 | /> 83 | 84 | 85 | 90 | setData('region', e.target.value)} 95 | /> 96 | 97 | 98 | 99 | setData('country', e.target.value)} 104 | options={[ 105 | { 106 | value: '', 107 | label: '' 108 | }, 109 | { 110 | value: 'CA', 111 | label: 'Canada' 112 | }, 113 | { 114 | value: 'US', 115 | label: 'United States' 116 | } 117 | ]} 118 | /> 119 | 120 | 121 | 126 | setData('postal_code', e.target.value)} 131 | /> 132 | 133 |
134 |
135 | 140 | Create Organization 141 | 142 |
143 |
144 |
145 |
146 | ); 147 | }; 148 | 149 | /** 150 | * Persistent Layout (Inertia.js) 151 | * 152 | * [Learn more](https://inertiajs.com/pages#persistent-layouts) 153 | */ 154 | Create.layout = (page: React.ReactNode) => ( 155 | 156 | ); 157 | 158 | export default Create; 159 | -------------------------------------------------------------------------------- /resources/js/Pages/Users/Edit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Head } from '@inertiajs/react'; 3 | import { Link, usePage, useForm, router } from '@inertiajs/react'; 4 | import MainLayout from '@/Layouts/MainLayout'; 5 | import DeleteButton from '@/Components/Button/DeleteButton'; 6 | import LoadingButton from '@/Components/Button/LoadingButton'; 7 | import TextInput from '@/Components/Form/TextInput'; 8 | import SelectInput from '@/Components/Form/SelectInput'; 9 | import FileInput from '@/Components/Form/FileInput'; 10 | import TrashedMessage from '@/Components/Messages/TrashedMessage'; 11 | import { User } from '@/types'; 12 | import FieldGroup from '@/Components/Form/FieldGroup'; 13 | 14 | const Edit = () => { 15 | const { user } = usePage<{ 16 | user: User & { password: string; photo: File | null }; 17 | }>().props; 18 | 19 | const { data, setData, errors, post, processing } = useForm({ 20 | first_name: user.first_name || '', 21 | last_name: user.last_name || '', 22 | email: user.email || '', 23 | password: user.password || '', 24 | owner: user.owner ? '1' : '0' || '0', 25 | photo: '', 26 | 27 | // NOTE: When working with Laravel PUT/PATCH requests and FormData 28 | // you SHOULD send POST request and fake the PUT request like this. 29 | _method: 'put' 30 | }); 31 | 32 | function handleSubmit(e: React.FormEvent) { 33 | e.preventDefault(); 34 | 35 | // NOTE: We are using POST method here, not PUT/PATCH. See comment above. 36 | post(route('users.update', user.id)); 37 | } 38 | 39 | function destroy() { 40 | if (confirm('Are you sure you want to delete this user?')) { 41 | router.delete(route('users.destroy', user.id)); 42 | } 43 | } 44 | 45 | function restore() { 46 | if (confirm('Are you sure you want to restore this user?')) { 47 | router.put(route('users.restore', user.id)); 48 | } 49 | } 50 | 51 | return ( 52 |
53 | 54 |
55 |

56 | 60 | Users 61 | 62 | / 63 | {data.first_name} {data.last_name} 64 |

65 | {user.photo && ( 66 | 67 | )} 68 |
69 | {user.deleted_at && ( 70 | 74 | )} 75 |
76 |
77 |
78 | 83 | setData('first_name', e.target.value)} 88 | /> 89 | 90 | 95 | setData('last_name', e.target.value)} 100 | /> 101 | 102 | 103 | 104 | setData('email', e.target.value)} 110 | /> 111 | 112 | 113 | 118 | setData('password', e.target.value)} 124 | /> 125 | 126 | 127 | 128 | setData('owner', e.target.value)} 133 | options={[ 134 | { value: '1', label: 'Yes' }, 135 | { value: '0', label: 'No' } 136 | ]} 137 | /> 138 | 139 | 140 | 141 | { 147 | setData('photo', photo as unknown as string); 148 | }} 149 | /> 150 | 151 |
152 |
153 | {!user.deleted_at && ( 154 | Delete User 155 | )} 156 | 161 | Update User 162 | 163 |
164 |
165 |
166 |
167 | ); 168 | }; 169 | 170 | /** 171 | * Persistent Layout (Inertia.js) 172 | * 173 | * [Learn more](https://inertiajs.com/pages#persistent-layouts) 174 | */ 175 | Edit.layout = (page: React.ReactNode) => ; 176 | 177 | export default Edit; 178 | -------------------------------------------------------------------------------- /resources/js/Pages/Contacts/Create.tsx: -------------------------------------------------------------------------------- 1 | import { Link, usePage, useForm } from '@inertiajs/react'; 2 | import MainLayout from '@/Layouts/MainLayout'; 3 | import LoadingButton from '@/Components/Button/LoadingButton'; 4 | import TextInput from '@/Components/Form/TextInput'; 5 | import SelectInput from '@/Components/Form/SelectInput'; 6 | import { Organization } from '@/types'; 7 | import FieldGroup from '@/Components/Form/FieldGroup'; 8 | 9 | const Create = () => { 10 | const { organizations } = usePage<{ organizations: Organization[] }>().props; 11 | const { data, setData, errors, post, processing } = useForm({ 12 | first_name: '', 13 | last_name: '', 14 | organization_id: '', 15 | email: '', 16 | phone: '', 17 | address: '', 18 | city: '', 19 | region: '', 20 | country: '', 21 | postal_code: '' 22 | }); 23 | 24 | function handleSubmit(e: React.FormEvent) { 25 | e.preventDefault(); 26 | post(route('contacts.store')); 27 | } 28 | 29 | return ( 30 |
31 |

32 | 36 | Contacts 37 | 38 | / Create 39 |

40 |
41 |
42 |
43 | 48 | setData('first_name', e.target.value)} 53 | /> 54 | 55 | 56 | 61 | setData('last_name', e.target.value)} 66 | /> 67 | 68 | 69 | 74 | setData('organization_id', e.target.value)} 79 | options={organizations?.map(({ id, name }) => ({ 80 | value: String(id), 81 | label: name 82 | }))} 83 | /> 84 | 85 | 86 | 87 | setData('email', e.target.value)} 93 | /> 94 | 95 | 96 | 97 | setData('phone', e.target.value)} 102 | /> 103 | 104 | 105 | 106 | setData('address', e.target.value)} 111 | /> 112 | 113 | 114 | 115 | setData('city', e.target.value)} 120 | /> 121 | 122 | 123 | 124 | setData('region', e.target.value)} 129 | /> 130 | 131 | 132 | 133 | setData('country', e.target.value)} 138 | options={[ 139 | { value: 'CA', label: 'Canada' }, 140 | { value: 'US', label: 'United States' } 141 | ]} 142 | /> 143 | 144 | 145 | 150 | setData('postal_code', e.target.value)} 155 | /> 156 | 157 |
158 |
159 | 164 | Create Contact 165 | 166 |
167 |
168 |
169 |
170 | ); 171 | }; 172 | 173 | /** 174 | * Persistent Layout (Inertia.js) 175 | * 176 | * [Learn more](https://inertiajs.com/pages#persistent-layouts) 177 | */ 178 | Create.layout = (page: React.ReactNode) => ( 179 | 180 | ); 181 | 182 | export default Create; 183 | -------------------------------------------------------------------------------- /resources/js/Pages/Organizations/Edit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Head } from '@inertiajs/react'; 3 | import { Link, usePage, useForm, router } from '@inertiajs/react'; 4 | import MainLayout from '@/Layouts/MainLayout'; 5 | import DeleteButton from '@/Components/Button/DeleteButton'; 6 | import LoadingButton from '@/Components/Button/LoadingButton'; 7 | import TextInput from '@/Components/Form/TextInput'; 8 | import SelectInput from '@/Components/Form/SelectInput'; 9 | import TrashedMessage from '@/Components/Messages/TrashedMessage'; 10 | import { Organization } from '@/types'; 11 | import Table from '@/Components/Table/Table'; 12 | import FieldGroup from '@/Components/Form/FieldGroup'; 13 | 14 | const Edit = () => { 15 | const { organization } = usePage<{ organization: Organization }>().props; 16 | const { data, setData, errors, put, processing } = useForm({ 17 | name: organization.name || '', 18 | email: organization.email || '', 19 | phone: organization.phone || '', 20 | address: organization.address || '', 21 | city: organization.city || '', 22 | region: organization.region || '', 23 | country: organization.country || '', 24 | postal_code: organization.postal_code || '' 25 | }); 26 | 27 | function handleSubmit(e: React.FormEvent) { 28 | e.preventDefault(); 29 | put(route('organizations.update', organization.id)); 30 | } 31 | 32 | function destroy() { 33 | if (confirm('Are you sure you want to delete this organization?')) { 34 | router.delete(route('organizations.destroy', organization.id)); 35 | } 36 | } 37 | 38 | function restore() { 39 | if (confirm('Are you sure you want to restore this organization?')) { 40 | router.put(route('organizations.restore', organization.id)); 41 | } 42 | } 43 | 44 | return ( 45 |
46 | 47 |

48 | 52 | Organizations 53 | 54 | / 55 | {data.name} 56 |

57 | {organization.deleted_at && ( 58 | 62 | )} 63 |
64 |
65 |
66 | 67 | setData('name', e.target.value)} 72 | /> 73 | 74 | 75 | 76 | setData('email', e.target.value)} 82 | /> 83 | 84 | 85 | 86 | setData('phone', e.target.value)} 91 | /> 92 | 93 | 94 | 95 | setData('address', e.target.value)} 100 | /> 101 | 102 | 103 | 104 | setData('city', e.target.value)} 109 | /> 110 | 111 | 112 | 117 | setData('region', e.target.value)} 122 | /> 123 | 124 | 125 | 126 | setData('country', e.target.value)} 131 | options={[ 132 | { 133 | value: '', 134 | label: '' 135 | }, 136 | { 137 | value: 'CA', 138 | label: 'Canada' 139 | }, 140 | { 141 | value: 'US', 142 | label: 'United States' 143 | } 144 | ]} 145 | />{' '} 146 | 147 | 148 | 153 | setData('postal_code', e.target.value)} 158 | /> 159 | 160 |
161 |
162 | {!organization.deleted_at && ( 163 | 164 | Delete Organization 165 | 166 | )} 167 | 172 | Update Organization 173 | 174 |
175 |
176 |
177 |

Contacts

178 | route('contacts.edit', row.id)} 186 | /> 187 | 188 | ); 189 | }; 190 | 191 | /** 192 | * Persistent Layout (Inertia.js) 193 | * 194 | * [Learn more](https://inertiajs.com/pages#persistent-layouts) 195 | */ 196 | Edit.layout = (page: React.ReactNode) => ; 197 | 198 | export default Edit; 199 | -------------------------------------------------------------------------------- /resources/lang/en/validation.php: -------------------------------------------------------------------------------- 1 | 'The :attribute must be accepted.', 17 | 'active_url' => 'The :attribute is not a valid URL.', 18 | 'after' => 'The :attribute must be a date after :date.', 19 | 'after_or_equal' => 'The :attribute must be a date after or equal to :date.', 20 | 'alpha' => 'The :attribute may only contain letters.', 21 | 'alpha_dash' => 'The :attribute may only contain letters, numbers, dashes and underscores.', 22 | 'alpha_num' => 'The :attribute may only contain letters and numbers.', 23 | 'array' => 'The :attribute must be an array.', 24 | 'before' => 'The :attribute must be a date before :date.', 25 | 'before_or_equal' => 'The :attribute must be a date before or equal to :date.', 26 | 'between' => [ 27 | 'numeric' => 'The :attribute must be between :min and :max.', 28 | 'file' => 'The :attribute must be between :min and :max kilobytes.', 29 | 'string' => 'The :attribute must be between :min and :max characters.', 30 | 'array' => 'The :attribute must have between :min and :max items.', 31 | ], 32 | 'boolean' => 'The :attribute field must be true or false.', 33 | 'confirmed' => 'The :attribute confirmation does not match.', 34 | 'date' => 'The :attribute is not a valid date.', 35 | 'date_equals' => 'The :attribute must be a date equal to :date.', 36 | 'date_format' => 'The :attribute does not match the format :format.', 37 | 'different' => 'The :attribute and :other must be different.', 38 | 'digits' => 'The :attribute must be :digits digits.', 39 | 'digits_between' => 'The :attribute must be between :min and :max digits.', 40 | 'dimensions' => 'The :attribute has invalid image dimensions.', 41 | 'distinct' => 'The :attribute field has a duplicate value.', 42 | 'email' => 'The :attribute must be a valid email address.', 43 | 'exists' => 'The selected :attribute is invalid.', 44 | 'file' => 'The :attribute must be a file.', 45 | 'filled' => 'The :attribute field must have a value.', 46 | 'gt' => [ 47 | 'numeric' => 'The :attribute must be greater than :value.', 48 | 'file' => 'The :attribute must be greater than :value kilobytes.', 49 | 'string' => 'The :attribute must be greater than :value characters.', 50 | 'array' => 'The :attribute must have more than :value items.', 51 | ], 52 | 'gte' => [ 53 | 'numeric' => 'The :attribute must be greater than or equal :value.', 54 | 'file' => 'The :attribute must be greater than or equal :value kilobytes.', 55 | 'string' => 'The :attribute must be greater than or equal :value characters.', 56 | 'array' => 'The :attribute must have :value items or more.', 57 | ], 58 | 'image' => 'The :attribute must be an image.', 59 | 'in' => 'The selected :attribute is invalid.', 60 | 'in_array' => 'The :attribute field does not exist in :other.', 61 | 'integer' => 'The :attribute must be an integer.', 62 | 'ip' => 'The :attribute must be a valid IP address.', 63 | 'ipv4' => 'The :attribute must be a valid IPv4 address.', 64 | 'ipv6' => 'The :attribute must be a valid IPv6 address.', 65 | 'json' => 'The :attribute must be a valid JSON string.', 66 | 'lt' => [ 67 | 'numeric' => 'The :attribute must be less than :value.', 68 | 'file' => 'The :attribute must be less than :value kilobytes.', 69 | 'string' => 'The :attribute must be less than :value characters.', 70 | 'array' => 'The :attribute must have less than :value items.', 71 | ], 72 | 'lte' => [ 73 | 'numeric' => 'The :attribute must be less than or equal :value.', 74 | 'file' => 'The :attribute must be less than or equal :value kilobytes.', 75 | 'string' => 'The :attribute must be less than or equal :value characters.', 76 | 'array' => 'The :attribute must not have more than :value items.', 77 | ], 78 | 'max' => [ 79 | 'numeric' => 'The :attribute may not be greater than :max.', 80 | 'file' => 'The :attribute may not be greater than :max kilobytes.', 81 | 'string' => 'The :attribute may not be greater than :max characters.', 82 | 'array' => 'The :attribute may not have more than :max items.', 83 | ], 84 | 'mimes' => 'The :attribute must be a file of type: :values.', 85 | 'mimetypes' => 'The :attribute must be a file of type: :values.', 86 | 'min' => [ 87 | 'numeric' => 'The :attribute must be at least :min.', 88 | 'file' => 'The :attribute must be at least :min kilobytes.', 89 | 'string' => 'The :attribute must be at least :min characters.', 90 | 'array' => 'The :attribute must have at least :min items.', 91 | ], 92 | 'not_in' => 'The selected :attribute is invalid.', 93 | 'not_regex' => 'The :attribute format is invalid.', 94 | 'numeric' => 'The :attribute must be a number.', 95 | 'present' => 'The :attribute field must be present.', 96 | 'regex' => 'The :attribute format is invalid.', 97 | 'required' => 'The :attribute field is required.', 98 | 'required_if' => 'The :attribute field is required when :other is :value.', 99 | 'required_unless' => 'The :attribute field is required unless :other is in :values.', 100 | 'required_with' => 'The :attribute field is required when :values is present.', 101 | 'required_with_all' => 'The :attribute field is required when :values are present.', 102 | 'required_without' => 'The :attribute field is required when :values is not present.', 103 | 'required_without_all' => 'The :attribute field is required when none of :values are present.', 104 | 'same' => 'The :attribute and :other must match.', 105 | 'size' => [ 106 | 'numeric' => 'The :attribute must be :size.', 107 | 'file' => 'The :attribute must be :size kilobytes.', 108 | 'string' => 'The :attribute must be :size characters.', 109 | 'array' => 'The :attribute must contain :size items.', 110 | ], 111 | 'starts_with' => 'The :attribute must start with one of the following: :values', 112 | 'string' => 'The :attribute must be a string.', 113 | 'timezone' => 'The :attribute must be a valid zone.', 114 | 'unique' => 'The :attribute has already been taken.', 115 | 'uploaded' => 'The :attribute failed to upload.', 116 | 'url' => 'The :attribute format is invalid.', 117 | 'uuid' => 'The :attribute must be a valid UUID.', 118 | 119 | /* 120 | |-------------------------------------------------------------------------- 121 | | Custom Validation Language Lines 122 | |-------------------------------------------------------------------------- 123 | | 124 | | Here you may specify custom validation messages for attributes using the 125 | | convention "attribute.rule" to name the lines. This makes it quick to 126 | | specify a specific custom language line for a given attribute rule. 127 | | 128 | */ 129 | 130 | 'custom' => [ 131 | 'attribute-name' => [ 132 | 'rule-name' => 'custom-message', 133 | ], 134 | ], 135 | 136 | /* 137 | |-------------------------------------------------------------------------- 138 | | Custom Validation Attributes 139 | |-------------------------------------------------------------------------- 140 | | 141 | | The following language lines are used to swap our attribute placeholder 142 | | with something more reader friendly such as "E-Mail Address" instead 143 | | of "email". This simply helps us make our message more expressive. 144 | | 145 | */ 146 | 147 | 'attributes' => [], 148 | 149 | ]; 150 | -------------------------------------------------------------------------------- /resources/js/Pages/Contacts/Edit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Head } from '@inertiajs/react'; 3 | import { Link, usePage, useForm, router } from '@inertiajs/react'; 4 | import MainLayout from '@/Layouts/MainLayout'; 5 | import DeleteButton from '@/Components/Button/DeleteButton'; 6 | import LoadingButton from '@/Components/Button/LoadingButton'; 7 | import TextInput from '@/Components/Form/TextInput'; 8 | import SelectInput from '@/Components/Form/SelectInput'; 9 | import TrashedMessage from '@/Components/Messages/TrashedMessage'; 10 | import { Contact, Organization } from '@/types'; 11 | import FieldGroup from '@/Components/Form/FieldGroup'; 12 | 13 | const Edit = () => { 14 | const { contact, organizations } = usePage<{ 15 | contact: Contact; 16 | organizations: Organization[]; 17 | }>().props; 18 | 19 | const { data, setData, errors, put, processing } = useForm({ 20 | first_name: contact.first_name || '', 21 | last_name: contact.last_name || '', 22 | organization_id: contact.organization_id || '', 23 | email: contact.email || '', 24 | phone: contact.phone || '', 25 | address: contact.address || '', 26 | city: contact.city || '', 27 | region: contact.region || '', 28 | country: contact.country || '', 29 | postal_code: contact.postal_code || '' 30 | }); 31 | 32 | function handleSubmit(e: React.FormEvent) { 33 | e.preventDefault(); 34 | put(route('contacts.update', contact.id)); 35 | } 36 | 37 | function destroy() { 38 | if (confirm('Are you sure you want to delete this contact?')) { 39 | router.delete(route('contacts.destroy', contact.id)); 40 | } 41 | } 42 | 43 | function restore() { 44 | if (confirm('Are you sure you want to restore this contact?')) { 45 | router.put(route('contacts.restore', contact.id)); 46 | } 47 | } 48 | 49 | return ( 50 |
51 | 52 |

53 | 57 | Contacts 58 | 59 | / 60 | {data.first_name} {data.last_name} 61 |

62 | {contact.deleted_at && ( 63 | 67 | )} 68 |
69 |
70 |
71 | 76 | setData('first_name', e.target.value)} 81 | /> 82 | 83 | 84 | 89 | setData('last_name', e.target.value)} 94 | /> 95 | 96 | 97 | 102 | setData('organization_id', e.target.value)} 107 | options={[ 108 | { 109 | value: '', 110 | label: '' 111 | }, 112 | ...organizations.map(org => ({ 113 | value: String(org.id), 114 | label: org.name 115 | })) 116 | ]} 117 | /> 118 | 119 | 120 | 121 | setData('email', e.target.value)} 127 | /> 128 | 129 | 130 | 131 | setData('phone', e.target.value)} 136 | /> 137 | 138 | 139 | 140 | setData('address', e.target.value)} 145 | /> 146 | 147 | 148 | 149 | setData('city', e.target.value)} 154 | /> 155 | 156 | 157 | 162 | setData('region', e.target.value)} 167 | /> 168 | 169 | 170 | 171 | setData('country', e.target.value)} 176 | options={[ 177 | { 178 | value: '', 179 | label: '' 180 | }, 181 | { 182 | value: 'CA', 183 | label: 'Canada' 184 | }, 185 | { 186 | value: 'US', 187 | label: 'United States' 188 | } 189 | ]} 190 | /> 191 | 192 | 193 | 198 | setData('postal_code', e.target.value)} 203 | /> 204 | 205 |
206 |
207 | {!contact.deleted_at && ( 208 | Delete Contact 209 | )} 210 | 215 | Update Contact 216 | 217 |
218 | 219 |
220 |
221 | ); 222 | }; 223 | 224 | /** 225 | * Persistent Layout (Inertia.js) 226 | * 227 | * [Learn more](https://inertiajs.com/pages#persistent-layouts) 228 | */ 229 | Edit.layout = (page: React.ReactNode) => ; 230 | 231 | export default Edit; 232 | --------------------------------------------------------------------------------