added profile logo in visitor

app/Filament/Resources/ItemResource.php

@@ -82,6 +82,9 @@ class ItemResource extends Resource
                         Forms\Components\TextInput::make('category')
                             ->label('Category')
                             ->placeholder('Scan the Category'),
+                        Forms\Components\TextInput::make('category')
+                            ->label('Category')
+                            ->placeholder('Scan the Category'),
                         Forms\Components\TextInput::make('code')
                             ->required()
                             ->placeholder('Scan the valid code')

app/Filament/Resources/VisitorEntryResource.php

@@ -0,0 +1,276 @@
+<?php
+
+namespace App\Filament\Resources;
+
+use App\Filament\Resources\VisitorEntryResource\Pages;
+use App\Filament\Resources\VisitorEntryResource\RelationManagers;
+use App\Models\VisitorEntry;
+use Filament\Facades\Filament;
+use Filament\Forms;
+use Filament\Forms\Form;
+use Filament\Resources\Resource;
+use Filament\Tables;
+use Filament\Tables\Table;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\SoftDeletingScope;
+
+class VisitorEntryResource extends Resource
+{
+    protected static ?string $model = VisitorEntry::class;
+
+    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';
+
+    public static function form(Form $form): Form
+    {
+        return $form
+            ->schema([
+                Forms\Components\TextInput::make('mobile_number')
+                    ->label('Mobile Number')
+                    ->length(10)
+                    ->reactive()
+                    ->extraInputAttributes([
+                        'oninput' => 'this.value = this.value.replace(/[^0-9]/g, "").slice(0, 10)', // blocks non-numbers + limits to 10 chars
+                        'maxlength' => 10,
+                    ])
+                    ->required()
+                    ->extraAttributes([
+                        'id' => 'mobile_number_input',
+                        'x-data' => '{ value: "" }',
+                        'x-model' => 'value',
+                        'wire:keydown.enter.prevent' => 'processMobile(value)',
+                    ]),
+                Forms\Components\TextInput::make('name')
+                    ->label('Name')
+                    ->required()
+                    ->reactive()
+                    ->extraInputAttributes([
+                        'oninput' => 'this.value = this.value.replace(/[^a-zA-Z\s]/g, "")',
+                    ]),
+                Forms\Components\Select::make('type')
+                    ->label('Type')
+                    ->reactive()
+                    ->options([
+                        'Student' => 'Student',
+                        'Consultant' => 'Consultant',
+                        'Vendor' => 'Vendor',
+                        'Other' => 'Other',
+                    ])
+                    ->required()
+                    ->dehydrateStateUsing(function ($state, callable $get) {
+                        return $state == 'Other'
+                            ? $get('other_type')
+                            : $state;
+                    }),
+                Forms\Components\TextInput::make('other_type')
+                    ->label('Specify Type')
+                    ->reactive()
+                    ->visible(fn (callable $get) => $get('type') == 'Other')
+                    ->required(fn (callable $get) => $get('type') == 'Other')
+                    ->dehydrated(false),
+                Forms\Components\TextInput::make('company')
+                    ->label('Company')
+                    ->required(),
+                Forms\Components\Select::make('department')
+                    ->label('Employee Department')
+                    ->options(
+                        \App\Models\EmployeeMaster::distinct()
+                            ->pluck('department', 'department')
+                    )
+                    ->required()
+                    ->reactive()
+                    ->afterStateUpdated(function (callable $set) {
+                        $set('employee_master_id', null);
+                        $set('code', null);
+                    }),
+                // Forms\Components\Select::make('employee_master_id')
+                //     ->label('Recipient Employee')
+                //     ->required()
+                //     ->options(function (callable $get) {
+                //         $department = $get('department');
+
+                //         if (!$department) {
+                //             return [];
+                //         }
+
+                //         return \App\Models\EmployeeMaster::where('department', $department)
+                //             ->pluck('name', 'id');
+                //     })
+                //     ->reactive()
+                //     ->afterStateUpdated(function (callable $set, callable $get, ?string $state) {
+                //         $department = $get('department');
+
+                //         $employee = \App\Models\EmployeeMaster::where('id', $state)
+                //             ->where('department', $department)
+                //             ->first();
+
+                //         $set('code', $employee ? $employee->code : '');
+                //     }),
+
+                Forms\Components\Select::make('employee_master_id')
+                    ->label('Recipient Employee')
+                    ->required()
+                    ->options(function (callable $get) {
+                        $department = $get('department');
+                        // Always load ALL employees, filter by department if set
+                        if ($department) {
+                            return \App\Models\EmployeeMaster::where('department', $department)
+                                ->pluck('name', 'id');
+                        }
+                        // Fallback: load all so fill() can always match the ID
+                        return \App\Models\EmployeeMaster::pluck('name', 'id');
+                    })
+                    ->reactive()
+                    ->afterStateUpdated(function (callable $set, ?string $state) {
+                        $employee = \App\Models\EmployeeMaster::find($state);
+                        $set('code', $employee?->code ?? '');
+                    }),
+
+                Forms\Components\TextInput::make('code')
+                    ->label('Employee Code')
+                    ->readOnly(),
+                Forms\Components\Textarea::make('purpose_of_visit')
+                    ->label('Purpose of Visit')
+                    ->required(),
+                Forms\Components\TextInput::make('number_of_person')
+                    ->numeric()
+                    ->default(1)
+                    ->required(),
+                Forms\Components\DateTimePicker::make('in_time')
+                ->label('In Time'),
+                Forms\Components\DateTimePicker::make('out_time')
+                ->label('Out Time'),
+                Forms\Components\View::make('components.webcam-field')
+                    ->columnSpanFull(),
+                Forms\Components\Hidden::make('photo'),
+                Forms\Components\Hidden::make('created_by')
+                ->label('created_by')
+                ->default(Filament::auth()->user()?->name),
+                Forms\Components\Hidden::make('updated_by')
+                ->label('updated_by')
+                ->default(Filament::auth()->user()?->name),
+            ]);
+    }
+
+    public static function table(Table $table): Table
+    {
+        return $table
+            ->columns([
+                Tables\Columns\TextColumn::make('No.')
+                    ->label('NO')
+                    ->alignCenter()
+                    ->getStateUsing(function ($record, $livewire, $column, $rowLoop) {
+                        $paginator = $livewire->getTableRecords();
+                        $perPage = method_exists($paginator, 'perPage') ? $paginator->perPage() : 10;
+                        $currentPage = method_exists($paginator, 'currentPage') ? $paginator->currentPage() : 1;
+
+                        return ($currentPage - 1) * $perPage + $rowLoop->iteration;
+                    }),
+                Tables\Columns\ImageColumn::make('photo')
+                    ->label('Photo')
+                    ->disk('public')
+                    ->height(50)
+                    ->width(50)
+                    // ->defaultImageUrl('https://ui-avatars.com/api/?name=Visitor&background=555&color=fff')
+                    ->defaultImageUrl(asset('images/profile.png'))
+                    ->alignCenter()
+                    ->extraImgAttributes(['style' => 'border-radius: 6px; object-fit: cover;']),
+                Tables\Columns\TextColumn::make('type')
+                    ->label('Visitor Type')
+                    ->alignCenter()
+                    ->sortable(),
+                Tables\Columns\TextColumn::make('name')
+                    ->label('Visitor Name')
+                    ->sortable()
+                    ->alignCenter()
+                    ->searchable(),
+                Tables\Columns\TextColumn::make('mobile_number')
+                    ->label('Visitor Mobile Number')
+                    ->alignCenter()
+                    ->sortable(),
+                Tables\Columns\TextColumn::make('employeeMaster.name')
+                    ->label('Recipient Name')
+                    ->alignCenter()
+                    ->sortable(),
+                Tables\Columns\TextColumn::make('employeeMaster.code')
+                    ->label('Receipient ID')
+                    ->alignCenter()
+                    ->sortable(),
+                Tables\Columns\TextColumn::make('employeeMaster.department')
+                    ->label('Receipient Department')
+                    ->alignCenter()
+                    ->sortable(),
+                Tables\Columns\TextColumn::make('number_of_person')
+                    ->label('Number of Person')
+                    ->numeric()
+                    ->alignCenter()
+                    ->sortable(),
+                Tables\Columns\TextColumn::make('in_time')
+                    ->label('In Time')
+                    ->dateTime()
+                    ->sortable()
+                    ->alignCenter(),
+                Tables\Columns\TextColumn::make('out_time')
+                    ->label('Out Time')
+                    ->dateTime()
+                    ->sortable()
+                    ->alignCenter(),
+                Tables\Columns\TextColumn::make('created_at')
+                    ->label('Created At')
+                    ->dateTime()
+                    ->sortable()
+                    ->toggleable(isToggledHiddenByDefault: true)
+                    ->alignCenter(),
+                Tables\Columns\TextColumn::make('updated_at')
+                    ->label('Updated At')
+                    ->dateTime()
+                    ->sortable()
+                    ->toggleable(isToggledHiddenByDefault: true)
+                    ->alignCenter(),
+                Tables\Columns\TextColumn::make('deleted_at')
+                    ->label('Deleted At')
+                    ->dateTime()
+                    ->sortable()
+                    ->toggleable(isToggledHiddenByDefault: true)
+                    ->alignCenter(),
+            ])
+            ->filters([
+                Tables\Filters\TrashedFilter::make(),
+            ])
+            ->actions([
+                Tables\Actions\ViewAction::make(),
+                Tables\Actions\EditAction::make(),
+            ])
+            ->bulkActions([
+                Tables\Actions\BulkActionGroup::make([
+                    Tables\Actions\DeleteBulkAction::make(),
+                    Tables\Actions\ForceDeleteBulkAction::make(),
+                    Tables\Actions\RestoreBulkAction::make(),
+                ]),
+            ]);
+    }
+
+    public static function getRelations(): array
+    {
+        return [
+            //
+        ];
+    }
+
+    public static function getPages(): array
+    {
+        return [
+            'index' => Pages\ListVisitorEntries::route('/'),
+            'create' => Pages\CreateVisitorEntry::route('/create'),
+            'view' => Pages\ViewVisitorEntry::route('/{record}'),
+            'edit' => Pages\EditVisitorEntry::route('/{record}/edit'),
+        ];
+    }
+
+    public static function getEloquentQuery(): Builder
+    {
+        return parent::getEloquentQuery()
+            ->withoutGlobalScopes([
+                SoftDeletingScope::class,
+            ]);
+    }
+}

app/Filament/Resources/VisitorEntryResource/Pages/CreateVisitorEntry.php

@@ -0,0 +1,150 @@
+<?php
+
+namespace App\Filament\Resources\VisitorEntryResource\Pages;
+
+use App\Filament\Resources\VisitorEntryResource;
+use App\Models\EmployeeMaster;
+use App\Models\VisitorEntry;
+use Filament\Actions;
+use Filament\Resources\Pages\CreateRecord;
+use Livewire\Attributes\On;
+use Storage;
+
+class CreateVisitorEntry extends CreateRecord
+{
+    protected static string $resource = VisitorEntryResource::class;
+
+    public $capturedPhoto;
+
+    // #[On('photo-captured')]
+    // public function handlePhotoCapture(string $photo): void
+    // {
+    //     // Puts the Base64 photo into the form's data array
+    //     $this->data['photo'] = $photo;
+    // }
+
+    public function processMobile($mobile)
+    {
+        $visitor = VisitorEntry::where('mobile_number', $mobile)->latest()->first();
+
+        if ($visitor) {
+
+            $employee = EmployeeMaster::where('id', $visitor->employee_master_id)->first();
+
+            $this->form->fill([
+                'mobile_number' => $mobile ?? '',
+                'name'       => $visitor->name ?? '',
+                'company' => $visitor->company ?? '',
+                'type'       => $visitor->type ?? '',
+                'department'    => $employee->department ?? '',
+                'employee_master_id' => $visitor->employee_master_id->name ?? '',
+                'code' => $employee->code ?? '',
+            ]);
+        }
+        else {
+
+            $this->form->fill([
+                'mobile_number' => $mobile ?? '',
+                'name'       => $visitor->name ?? '',
+                'company' => $visitor->company ?? '',
+                'type'       => $visitor->type ?? '',
+                'department'    => $employee->department ?? '',
+                'employee_master_id' => $visitor->employee_master_id->name ?? '',
+                'code' => $employee->code ?? '',
+            ]);
+        }
+    }
+
+    // protected function mutateFormDataBeforeCreate(array $data): array
+    // {
+    //     if (
+    //         !empty($data['photo']) &&
+    //         str_starts_with($data['photo'], 'data:image')
+    //     ) {
+    //         // Step A: Strip the "data:image/jpeg;base64," prefix
+    //         $imageData = explode(',', $data['photo'])[1];
+
+    //         // Step B: Generate a unique filename
+    //         $filename = 'visitor_' . time() . '_' . uniqid() . '.jpg';
+
+    //         // Step C: Decode Base64 and save as a real .jpg file
+    //         $path = 'visitor-photos/' . $filename;
+    //         Storage::disk('public')->put($path, base64_decode($imageData));
+
+    //         // Step D: Replace the Base64 string with just the file path
+    //         $data['photo'] = $path;
+    //     }
+
+    //     return $data;
+    // }
+
+        #[On('photo-captured')]
+        public function handlePhotoCapture(string $photo): void
+        {
+            $this->data['photo'] = $photo;
+            \Log::info('WEBCAM: photo-captured event received, length: ' . strlen($photo));
+        }
+
+        // protected function mutateFormDataBeforeCreate(array $data): array
+        // {
+        //     \Log::info('WEBCAM: mutateFormDataBeforeCreate called, photo value: ' . substr($data['photo'] ?? 'NULL', 0, 50));
+
+        //     if (
+        //         !empty($data['photo']) &&
+        //         str_starts_with($data['photo'], 'data:image')
+        //     ) {
+        //         $imageData = explode(',', $data['photo'])[1];
+        //         $filename  = 'visitor_' . time() . '_' . uniqid() . '.jpg';
+        //         $path      = 'visitor-photos/' . $filename;
+        //         Storage::disk('public')->put($path, base64_decode($imageData));
+        //         $data['photo'] = $path;
+
+        //         \Log::info('WEBCAM: photo saved to ' . $path);
+        //     }
+
+        //     return $data;
+        // }
+
+        protected function mutateFormDataBeforeCreate(array $data): array
+        {
+            if (
+                !empty($data['photo']) &&
+                str_starts_with($data['photo'], 'data:image')
+            ) {
+                try {
+                    $imageData = explode(',', $data['photo'])[1];
+
+                    $filename = 'visitor_' . time() . '_' . uniqid() . '.jpg';
+
+                    $path = 'visitor-photos/' . $filename;
+
+                    $decoded = base64_decode($imageData);
+
+                    $saved = Storage::disk('public')->put($path, $decoded);
+
+                    \Log::info('PHOTO UPLOAD (PUBLIC):', [
+                        'filename' => $filename,
+                        'path' => $path,
+                        'size_bytes' => strlen($decoded),
+                        'saved' => $saved ? 'SUCCESS' : 'FAILED',
+                    ]);
+
+                    $data['photo'] = $path;
+
+                } catch (\Exception $e) {
+                    \Log::error('PHOTO UPLOAD ERROR: ' . $e->getMessage());
+                }
+            }
+
+            return $data;
+        }
+
+
+        public function setPhoto(string $photo): void
+        {
+            $this->capturedPhoto = $photo;
+
+            // Change this ↓ to dispatch to parent explicitly
+            $this->dispatch('photo-captured', photo: $photo)->to(\App\Filament\Resources\VisitorEntryResource\Pages\CreateVisitorEntry::class);
+        }
+}

app/Filament/Resources/VisitorEntryResource/Pages/EditVisitorEntry.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Filament\Resources\VisitorEntryResource\Pages;
+
+use App\Filament\Resources\VisitorEntryResource;
+use Filament\Actions;
+use Filament\Resources\Pages\EditRecord;
+use Livewire\Attributes\On;
+use Storage;
+
+class EditVisitorEntry extends EditRecord
+{
+    protected static string $resource = VisitorEntryResource::class;
+
+    protected function getHeaderActions(): array
+    {
+        return [
+            Actions\ViewAction::make(),
+            Actions\DeleteAction::make(),
+            Actions\ForceDeleteAction::make(),
+            Actions\RestoreAction::make(),
+        ];
+    }
+
+    #[On('photo-captured')]
+    public function handlePhotoCapture(string $photo): void
+    {
+        $this->data['photo'] = $photo;
+    }
+
+    protected function mutateFormDataBeforeSave(array $data): array
+    {
+        if (
+            !empty($data['photo']) &&
+            str_starts_with($data['photo'], 'data:image')
+        ) {
+            // Delete the old photo file if one exists
+            $oldPhoto = $this->record->photo;
+            if ($oldPhoto && Storage::disk('public')->exists($oldPhoto)) {
+                Storage::disk('public')->delete($oldPhoto);
+            }
+
+            // Save the new photo
+            $imageData = explode(',', $data['photo'])[1];
+            $filename  = 'visitor_' . time() . '_' . uniqid() . '.jpg';
+            $path      = 'visitor-photos/' . $filename;
+            Storage::disk('public')->put($path, base64_decode($imageData));
+
+            $data['photo'] = $path;
+        }
+
+        return $data;
+    }
+}

app/Filament/Resources/VisitorEntryResource/Pages/ListVisitorEntries.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Filament\Resources\VisitorEntryResource\Pages;
+
+use App\Filament\Resources\VisitorEntryResource;
+use Filament\Actions;
+use Filament\Resources\Pages\ListRecords;
+
+class ListVisitorEntries extends ListRecords
+{
+    protected static string $resource = VisitorEntryResource::class;
+
+    protected function getHeaderActions(): array
+    {
+        return [
+            Actions\CreateAction::make(),
+        ];
+    }
+}

app/Filament/Resources/VisitorEntryResource/Pages/ViewVisitorEntry.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Filament\Resources\VisitorEntryResource\Pages;
+
+use App\Filament\Resources\VisitorEntryResource;
+use Filament\Actions;
+use Filament\Resources\Pages\ViewRecord;
+
+class ViewVisitorEntry extends ViewRecord
+{
+    protected static string $resource = VisitorEntryResource::class;
+
+    protected function getHeaderActions(): array
+    {
+        return [
+            Actions\EditAction::make(),
+        ];
+    }
+}

app/Livewire/Webcam.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class Webcam extends Component
+{
+
+    public string $capturedPhoto = '';
+
+    // Called from JavaScript when a photo is taken
+    public function setPhoto(string $photo): void
+    {
+        $this->capturedPhoto = $photo;
+
+        // Fires a browser event that the Filament form will listen to
+        $this->dispatch('photo-captured', photo: $photo);
+    }
+
+    // Called from JavaScript when user clicks "Retake"
+    public function clearPhoto(): void
+    {
+        $this->capturedPhoto = '';
+
+        $this->dispatch('photo-captured', photo: '');
+    }
+    public function render()
+    {
+        return view('livewire.webcam');
+    }
+}

app/Models/VisitorEntry.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class VisitorEntry extends Model
+{
+    use SoftDeletes;
+
+    protected $fillable = [
+        'mobile_number',
+        'name',
+        'company',
+        'purpose_of_visit',
+        'type',
+        'in_time',
+        'out_time',
+        'photo',
+        'employee_master_id',
+        'number_of_person'
+    ];
+
+    public function employeeMaster(): BelongsTo
+    {
+        return $this->belongsTo(EmployeeMaster::class);
+    }
+}

database/migrations/2026_05_25_110842_create_visitor_entries_table.php

@@ -0,0 +1,47 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        $sql = <<<'SQL'
+            CREATE TABLE visitor_entries (
+                id					               	BIGINT GENERATED always AS IDENTITY PRIMARY KEY,
+                employee_master_id                  BIGINT NOT NULL,
+                mobile_number                       BIGINT NOT NULL,
+                name                                TEXT DEFAULT NULL,
+                company                             TEXT DEFAULT NULL,
+                purpose_of_visit                    TEXT DEFAULT NULL,
+                type                                TEXT DEFAULT NULL,
+                number_of_person                    INTEGER DEFAULT NULL,
+                in_time                             TIMESTAMP DEFAULT NULL,
+                out_time                            TIMESTAMP DEFAULT NULL,
+                photo                               TEXT DEFAULT NULL,
+
+                created_at							TIMESTAMP NOT NULL DEFAULT NOW(),
+                updated_at							TIMESTAMP NOT NULL DEFAULT NOW(),
+                created_by							TEXT DEFAULT NULL,
+                updated_by							TEXT DEFAULT NULL,
+                deleted_at			                TIMESTAMP,
+
+                FOREIGN KEY (employee_master_id) REFERENCES employee_masters (id)
+            );
+        SQL;
+        DB::statement($sql);
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('visitor_entries');
+    }
+};

resources/views/components/webcam-field.blade.php

@@ -0,0 +1,10 @@
+<div>
+    <x-filament::section>
+        <x-slot name="heading">
+            Visitor Photo
+        </x-slot>
+
+        <livewire:webcam />
+
+    </x-filament::section>
+</div>

resources/views/livewire/webcam.blade.php

@@ -0,0 +1,193 @@
+<div
+    x-data="{
+        cameraActive: false,
+        captured: false,
+        errorMessage: '',
+        photoData: '',
+
+        async startCamera() {
+            this.errorMessage = '';
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    video: { width: 640, height: 480, facingMode: 'user' }
+                });
+                this.$refs.video.srcObject = stream;
+                await this.$refs.video.play();
+                this.cameraActive = true;
+            } catch (err) {
+                if (err.name === 'NotAllowedError') {
+                    this.errorMessage = 'Camera permission denied. Please allow camera access in your browser and try again.';
+                } else if (err.name === 'NotFoundError') {
+                    this.errorMessage = 'No camera found. Please connect a webcam and try again.';
+                } else {
+                    this.errorMessage = 'Could not access camera: ' + err.message;
+                }
+            }
+        },
+
+        capture() {
+            const canvas = this.$refs.canvas;
+            const video  = this.$refs.video;
+            canvas.width  = video.videoWidth  || 640;
+            canvas.height = video.videoHeight || 480;
+            canvas.getContext('2d').drawImage(video, 0, 0);
+            const photoData = canvas.toDataURL('image/jpeg', 0.85);
+
+            // Stop the camera stream after capture
+            if (video.srcObject) {
+                video.srcObject.getTracks().forEach(track => track.stop());
+            }
+            this.cameraActive = false;
+            this.captured     = true;
+            this.photoData    = photoData;
+
+            // Send photo data to PHP via Livewire
+            $wire.setPhoto(photoData);
+        },
+
+        retake() {
+            this.captured = false;
+            this.photoData = '';
+            $wire.clearPhoto();
+            this.$nextTick(() => this.startCamera());
+        }
+    }"
+    style="font-family: inherit;"
+>
+    {{-- ── Error message ── --}}
+    <template x-if="errorMessage">
+        <div style="
+            background: #3b1a1a;
+            border: 1px solid #7f2020;
+            color: #f87171;
+            padding: 10px 14px;
+            border-radius: 8px;
+            margin-bottom: 12px;
+            font-size: 13px;
+        " x-text="errorMessage"></div>
+    </template>
+
+    {{-- ── Live video feed (shown while camera is active) ── --}}
+    <div x-show="cameraActive && !captured" style="position: relative;">
+        <video
+            x-ref="video"
+            autoplay
+            playsinline
+            muted
+            style="
+                width: 100%;
+                max-width: 480px;
+                border-radius: 10px;
+                display: block;
+                background: #111;
+            "
+        ></video>
+    </div>
+
+    {{-- ── Captured photo preview (shown after capture) ── --}}
+    <div x-show="captured" style="position: relative;">
+        <img
+            {{-- x-bind:src="$refs.canvas ? $refs.canvas.toDataURL('image/jpeg') : ''" --}}
+            x-bind:src="photoData"
+            style="
+                width: 100%;
+                max-width: 480px;
+                border-radius: 10px;
+                display: block;
+                border: 2px solid #16a34a;
+            "
+            alt="Captured visitor photo"
+        />
+        <div style="
+            position: absolute;
+            top: 10px; left: 10px;
+            background: #16a34a;
+            color: white;
+            padding: 3px 10px;
+            border-radius: 20px;
+            font-size: 12px;
+        ">✓ Photo captured</div>
+    </div>
+
+    {{-- ── Placeholder (before camera starts) ── --}}
+    <div
+        x-show="!cameraActive && !captured"
+        style="
+            width: 100%;
+            max-width: 480px;
+            height: 200px;
+            background: #1a1a1a;
+            border: 2px dashed #444;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #666;
+            font-size: 14px;
+        "
+    >
+        📷 Camera not started yet
+    </div>
+
+    {{-- ── Hidden canvas used for capturing the frame ── --}}
+    <canvas x-ref="canvas" style="display: none;"></canvas>
+
+    {{-- ── Buttons ── --}}
+    <div style="display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap;">
+
+        {{-- Start Camera button --}}
+        <button
+            type="button"
+            x-show="!cameraActive && !captured"
+            x-on:click="startCamera()"
+            style="
+                background: #2563eb;
+                color: white;
+                border: none;
+                padding: 9px 20px;
+                border-radius: 8px;
+                cursor: pointer;
+                font-size: 14px;
+            "
+        >
+            📷 Start Camera
+        </button>
+
+        {{-- Capture button --}}
+        <button
+            type="button"
+            x-show="cameraActive && !captured"
+            x-on:click="capture()"
+            style="
+                background: #16a34a;
+                color: white;
+                border: none;
+                padding: 9px 20px;
+                border-radius: 8px;
+                cursor: pointer;
+                font-size: 14px;
+            "
+        >
+            📸 Capture Photo
+        </button>
+
+        {{-- Retake button --}}
+        <button
+            type="button"
+            x-show="captured"
+            x-on:click="retake()"
+            style="
+                background: #b45309;
+                color: white;
+                border: none;
+                padding: 9px 20px;
+                border-radius: 8px;
+                cursor: pointer;
+                font-size: 14px;
+            "
+        >
+            🔄 Retake Photo
+        </button>
+
+    </div>
+</div>