feat(Show): add NoContract component for better handling of absent contracts

Author: Barata-Ribeiro

resources/js/components/helpers/no-contract.tsx

@@ -0,0 +1,25 @@
+import { Button } from '@/components/ui/button';
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty';
+import { FileUserIcon } from 'lucide-react';
+
+export default function NoContract() {
+    return (
+        <Empty className="border border-dashed">
+            <EmptyHeader>
+                <EmptyMedia variant="icon">
+                    <FileUserIcon aria-hidden />
+                </EmptyMedia>
+                <EmptyTitle>No Contract Found</EmptyTitle>
+                <EmptyDescription>
+                    This employee does not have any contract assigned yet. Please add a contract to proceed.
+                </EmptyDescription>
+            </EmptyHeader>
+            <EmptyContent>
+                <Button size="sm">
+                    {/* TODO: Implement route link to create contract */}
+                    Add Contract
+                </Button>
+            </EmptyContent>
+        </Empty>
+    );
+}

resources/js/pages/employees/Show.tsx

@@ -1,6 +1,7 @@
 import ContractItemListItem from '@/components/helpers/contract-item-list-item';
 import EmployeeAccountInfoItem from '@/components/helpers/employee-account-info-item';
 import EmployeePersonalInfoItem from '@/components/helpers/employee-personal-info-item';
+import NoContract from '@/components/helpers/no-contract';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -105,7 +106,7 @@ export default function Show({ employee: data }: Readonly<{ employee: EmployeeIn
                                     ))}
                                 </ul>
                             ) : (
-                                <p>No contracts available.</p>
+                                <NoContract />
                             )}
                         </TabsContent>
                     </Tabs>