Typescript Integration

.env.example

@@ -1,4 +1,4 @@
-APP_NAME=Laravel
+APP_NAME="Ping CRM"
 APP_ENV=local
 APP_KEY=
 APP_DEBUG=true

app/Http/Controllers/UsersController.php

@@ -38,10 +38,16 @@ public function create(): Response
 
     public function store(UserStoreRequest $request): RedirectResponse
     {
-        Auth::user()->account->users()->create(
+        $user = Auth::user()->account->users()->create(
             $request->validated()
         );
 
+        if ($request->hasFile('photo')) {
+            $user->update([
+                'photo' => $request->file('photo')->store('users'),
+            ]);
+        }
+
         return Redirect::route('users')->with('success', 'User created.');
     }
 
@@ -58,6 +64,12 @@ public function update(User $user, UserUpdateRequest $request): RedirectResponse
             $request->validated()
         );
 
+        if ($request->hasFile('photo')) {
+            $user->update([
+                'photo' => $request->file('photo')->store('users'),
+            ]);
+        }
+
         return Redirect::back()->with('success', 'User updated.');
     }
 

app/Http/Resources/UserCollection.php

@@ -14,8 +14,13 @@ class UserCollection extends ResourceCollection
      */
     public function toArray($request)
     {
-        return $this->collection->map->only(
-            'id', 'name', 'email', 'owner', 'photo', 'deleted_at'
-        );
+        return $this->collection->map(fn ($user) => [
+            'id' => $user->id,
+            'name' => $user->name,
+            'email' => $user->email,
+            'owner' => $user->owner,
+            'photo' => $user->photo ? url()->route('image', ['path' => $user->photo, 'w' => 60, 'h' => 60, 'fit' => 'crop']) : null,
+            'deleted_at' => $user->deleted_at,
+        ]);
     }
 }

app/Http/Resources/UserResource.php

@@ -21,7 +21,7 @@ public function toArray($request)
             'name' => $this->name,
             'email' => $this->email,
             'owner' => $this->owner,
-            'photo' => $this->photo,
+            'photo' => $this->photo ? url()->route('image', ['path' => $this->photo, 'w' => 60, 'h' => 60, 'fit' => 'crop']) : null,
             'deleted_at' => $this->deleted_at,
             'account' => $this->whenLoaded('account'),
         ];

app/Models/User.php

@@ -21,8 +21,11 @@ class User extends Authenticatable
      */
     protected $fillable = [
         'name',
+        'first_name',
+        'last_name',
         'email',
         'password',
+        'photo',
     ];
 
     /**

database/migrations/2020_01_01_000004_create_users_table.php

@@ -20,7 +20,7 @@ public function up(): void
             $table->timestamp('email_verified_at')->nullable();
             $table->string('password')->nullable();
             $table->boolean('owner')->default(false);
-            $table->string('photo_path', 100)->nullable();
+            $table->string('photo', 100)->nullable();
             $table->rememberToken();
             $table->timestamps();
             $table->softDeletes();

package.json

@@ -13,18 +13,24 @@
     "cross-env": "^7.0.3",
     "eslint": "^8.32.0",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.378.0",
     "postcss-import": "^15.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
     "react-use": "^17.4.0",
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "@types/lodash": "^4.17.4",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint-plugin-react": "^7.32.1",
     "laravel-vite-plugin": "^1.0.4",
     "postcss": "^8.4.21",
+    "typescript": "^5.4.5",
     "vite": "^5.2.11"
   }
 }

resources/css/app.css

@@ -1,4 +1,4 @@
-@import 'components/form';
+/* @import 'components/form'; */
 @import 'components/button';
 
 @tailwind base;

resources/js/Components/Alert/Alert.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Check, CircleX, TriangleAlert } from 'lucide-react';
+import CloseButton from '@/Components/Button/CloseButton';
+
+interface Alert {
+  message: string;
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
+  onClose?: () => void;
+  variant?: 'success' | 'error' | 'warning';
+}
+
+export default function Alert({
+  icon,
+  action,
+  message,
+  variant,
+  onClose
+}: Alert) {
+  const color = {
+    success: 'green',
+    error: 'red',
+    warning: 'yellow'
+  }[variant || 'success'];
+
+  const backGroundColor = {
+    success: 'bg-green-500 text-white',
+    error: 'bg-red-500 text-white',
+    warning: 'bg-yellow-500 text-yellow-800'
+  }[variant || 'success'];
+
+  const iconComponent = {
+    success: <Check size={20} />,
+    error: <CircleX size={20} />,
+    warning: <TriangleAlert size={20} />
+  }[variant || 'success'];
+
+  return (
+    <div
+      className={`${backGroundColor} px-4 mb-8 flex items-center justify-between rounded max-w-3xl`}
+    >
+      <div className="flex items-center space-x-2">
+        {icon || iconComponent}
+        <div className="py-4 text-sm font-medium">{message}</div>
+      </div>
+      {action}
+      {onClose && <CloseButton onClick={onClose} color={color} />}
+    </div>
+  );
+}