From 3de1748f12b7b3b5833013abc14b2656e3a32453 Mon Sep 17 00:00:00 2001
From: Hafid Nur <73023445+hafidnrzs@users.noreply.github.com>
Date: Mon, 23 Feb 2026 10:06:08 +0700
Subject: [PATCH] fix(qr): Empty State (#76)

* fix(qr): add empty state for campaign & user management page to handle unexcepted null error

* fix(qr): fix empty state logic in the user management page
---
 .../src/app/admin/campaigns/page.tsx          | 26 ++++++++++++++++++-
 apps/qrcampaign/src/app/admin/users/page.tsx  | 20 ++++++++++++--
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/apps/qrcampaign/src/app/admin/campaigns/page.tsx b/apps/qrcampaign/src/app/admin/campaigns/page.tsx
index f71e83b..e9ef101 100644
--- a/apps/qrcampaign/src/app/admin/campaigns/page.tsx
+++ b/apps/qrcampaign/src/app/admin/campaigns/page.tsx
@@ -10,6 +10,7 @@ import {
   DeleteOutlined,
   CheckCircleOutlined,
   PlusOutlined,
+  FileOutlined,
 } from '@ant-design/icons';
 
 export default function CampaignsPage() {
@@ -195,7 +196,30 @@ export default function CampaignsPage() {
         </button>
       </div>
 
-      <DataTable data={campaigns} columns={columns} pageSize={10} />
+      {!campaigns || campaigns.length === 0 ? (
+        <div className="bg-white rounded-lg border border-gray-200 p-12 text-center shadow-sm">
+          <div className="max-w-sm mx-auto">
+            <div className="text-gray-400 mb-4">
+              <FileOutlined className="text-[48px] mx-auto" />
+            </div>
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
+              No campaigns yet
+            </h3>
+            <p className="text-gray-500 mb-6">
+              Get started by creating your first QR campaign.
+            </p>
+            <button
+              onClick={() => setShowCreateModal(true)}
+              className="inline-flex items-center gap-2 bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition-colors cursor-pointer"
+            >
+              <PlusOutlined />
+              Create Your First Campaign
+            </button>
+          </div>
+        </div>
+      ) : (
+        <DataTable data={campaigns} columns={columns} pageSize={10} />
+      )}
 
       {/* Create Campaign Modal */}
       {showCreateModal && (
diff --git a/apps/qrcampaign/src/app/admin/users/page.tsx b/apps/qrcampaign/src/app/admin/users/page.tsx
index 7dc434f..853fef0 100644
--- a/apps/qrcampaign/src/app/admin/users/page.tsx
+++ b/apps/qrcampaign/src/app/admin/users/page.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { ColumnDef } from '@tanstack/react-table';
 import { DataTable } from '@imphnen-frontend-service/ui/organisms';
 import { userService, User } from '../../features/admin/api/user.service';
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import { DeleteOutlined, EditOutlined, UserOutlined } from '@ant-design/icons';
 
 export default function UsersPage() {
   const [users, setUsers] = useState<User[]>([]);
@@ -193,7 +193,23 @@ export default function UsersPage() {
         <p className="text-gray-600 mt-1">Manage users and their roles</p>
       </div>
 
-      <DataTable data={users} columns={columns} pageSize={10} />
+      {!users || users.length === 0 ? (
+        <div className="bg-white rounded-lg border border-gray-200 p-12 text-center shadown-sm">
+          <div className="max-w-sm mx-auto">
+            <div className="text-gray-400 mb-4">
+              <UserOutlined className="text-[48px]" />
+            </div>
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
+              No users found
+            </h3>
+            <p className="text-gray-500">
+              There are currently no users in the system.
+            </p>
+          </div>
+        </div>
+      ) : (
+        <DataTable data={users} columns={columns} pageSize={10} />
+      )}
     </div>
   );
 }