fix(qr): fix empty state logic in the user management page

fix(qr): add empty state for campaign & user management page to handle unexcepted null error
fix(qr): update API url to https
2026-02-17 18:47:27 +07:00 · 2026-02-17 18:38:47 +07:00 · 2026-02-14 18:29:30 +07:00 · 2026-02-14 18:13:28 +07:00 · 2026-02-14 18:03:58 +07:00 · 2026-02-14 17:57:03 +07:00
15 changed files with 2318 additions and 19 deletions
@@ -0,0 +1 @@
+/nix/store/01x5k4nlxcpyd85nnr0b9gm89rm8ff4x-source
@@ -0,0 +1 @@
+/nix/store/8hx8jwa24q6rkzhca9iqy5ckk9rbphi1-source
@@ -0,0 +1 @@
+/nix/store/jizz7ld5r2w11y03wrmnvwsskc45krj9-source
@@ -0,0 +1 @@
+/nix/store/yj1wxm9hh8610iyzqnz75kvs6xl8j3my-source
@@ -0,0 +1 @@
+/nix/store/y4p9szcab9xd7v1c7k9ghr86hb6myyg4-nix-shell-env
@@ -1,18 +1,23 @@
 const apps = [
  { name: 'Landing', domain: 'imphnen.dev', type: 'Next.js', color: 'blue' },
+  { name: 'WWW', domain: 'www.imphnen.dev', type: 'Redirect', color: 'purple' },
  { name: 'Gacha', domain: 'gacha.imphnen.dev', type: 'Vite', color: 'green' },
  { name: 'Backoffice', domain: 'backoffice.imphnen.dev', type: 'Vite', color: 'green' },
  { name: 'Dimentorin', domain: 'dimentorin.imphnen.dev', type: 'Vite', color: 'green' },
  { name: 'Hackathon', domain: 'hackathon.imphnen.dev', type: 'Vite', color: 'green' },
+  { name: 'QR Campaign', domain: 'qr.imphnen.dev', type: 'Vite', color: 'green' },
  { name: 'Infra', domain: 'infra.imphnen.dev', type: 'Vite', color: 'green' },
+  { name: 'API QR', domain: 'api-qr.imphnen.dev', type: 'Backend', color: 'orange' },
 ];

 const techStack = [
-  { category: 'OS', items: ['NixOS 24.11'] },
+  { category: 'OS', items: ['NixOS 25.05'] },
  { category: 'Web Server', items: ['Nginx'] },
  { category: 'SSL', items: ['Let\'s Encrypt (ACME)'] },
  { category: 'Build', items: ['Nix Flakes', 'Nx Monorepo'] },
+  { category: 'CI/CD', items: ['GitHub Actions', 'Cachix'] },
  { category: 'Frontend', items: ['React', 'Next.js', 'Vite', 'TailwindCSS'] },
+  { category: 'Backend', items: ['Go', 'Supabase'] },
  { category: 'Secrets', items: ['sops-nix'] },
 ];

@@ -171,15 +176,23 @@ export default function App() {
                <div className="w-12 h-12 bg-zinc-800 rounded-full flex items-center justify-center mx-auto mb-2">
                  <span>2</span>
                </div>
-                <p className="text-sm font-medium">Update Flake</p>
-                <p className="text-xs text-zinc-500">nix flake update</p>
+                <p className="text-sm font-medium">GitHub Actions</p>
+                <p className="text-xs text-zinc-500">nix build</p>
+              </div>
+              <div className="hidden md:block text-zinc-600">→</div>
+              <div className="text-center">
+                <div className="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center mx-auto mb-2">
+                  <span>3</span>
+                </div>
+                <p className="text-sm font-medium">Push to Cachix</p>
+                <p className="text-xs text-zinc-500">binary cache</p>
              </div>
              <div className="hidden md:block text-zinc-600">→</div>
              <div className="text-center">
                <div className="w-12 h-12 bg-zinc-800 rounded-full flex items-center justify-center mx-auto mb-2">
-                  <span>3</span>
+                  <span>4</span>
                </div>
-                <p className="text-sm font-medium">Remote Build</p>
+                <p className="text-sm font-medium">Server Pull</p>
                <p className="text-xs text-zinc-500">nixos-rebuild</p>
              </div>
              <div className="hidden md:block text-zinc-600">→</div>
@@ -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 && (
@@ -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>
  );
 }
@@ -1,7 +1,7 @@
 import axios from 'axios';

 // Define the base URL for the API
-const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8080/api/v1';
+const API_URL = 'https://api-qr.imphnen.dev/api/v1';

 // Create a configured axios instance
 export const api = axios.create({
@@ -0,0 +1,61 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1769170682,
+        "narHash": "sha256-oMmN1lVQU0F0W2k6OI3bgdzp2YOHWYUAw79qzDSjenU=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "c5296fdd05cfa2c187990dd909864da9658df755",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}
@@ -12,7 +12,7 @@
        pkgs = import nixpkgs { inherit system; };

        # NPM dependencies hash (update with: nix run nixpkgs#prefetch-npm-deps -- package-lock.json)
-        npmDepsHash = "sha256-xmG0ej6GJk1HIFFmrB9CpovNA20sJ7RanFLMBCxKdy0=";
+        npmDepsHash = "sha256-6O36QDvjiD7j5MgBhID3+5IeJ47MUeK/025ZTKD0ltU=";

        # Import helpers
        mkViteApp = import ./nix/mkViteApp.nix {
@@ -45,7 +45,7 @@
        # Development shell
        devShells.default = pkgs.mkShell {
          buildInputs = with pkgs; [
-            nodejs_22
+            nodejs
            nodePackages.npm
            bun

@@ -116,7 +116,7 @@
          mkHackathonWithEnv = envVars: import ./nix/mkViteApp.nix {
            pkgs = final;
            src = self;
-            npmDepsHash = "sha256-xmG0ej6GJk1HIFFmrB9CpovNA20sJ7RanFLMBCxKdy0=";
+            npmDepsHash = "sha256-6O36QDvjiD7j5MgBhID3+5IeJ47MUeK/025ZTKD0ltU=";
          } { name = "hackathon"; buildScript = "hackathon:build"; inherit envVars; };
        };
      };
@@ -10,7 +10,7 @@ pkgs.buildNpmPackage {
  makeCacheWritable = true;

  nativeBuildInputs = with pkgs; [
-    nodejs_22
+    nodejs
    nodePackages.npm
    python3  # Required for node-gyp (sharp, etc.)
  ];
@@ -48,7 +48,7 @@ pkgs.buildNpmPackage {
    cat > $out/bin/imphnen-landing <<EOF
    #!${pkgs.bash}/bin/bash
    cd $out/share/landing
-    exec ${pkgs.nodejs_22}/bin/node --jitless apps/landing/server.js "\$@"
+    exec ${pkgs.nodejs}/bin/node --jitless apps/landing/server.js "\$@"
    EOF
    chmod +x $out/bin/imphnen-landing

@@ -12,7 +12,7 @@ pkgs.buildNpmPackage {
  makeCacheWritable = true;

  nativeBuildInputs = with pkgs; [
-    nodejs_22
+    nodejs
    nodePackages.npm
    util-linux  # For script command to create pseudo-terminal
  ];
@@ -71,7 +71,7 @@
        "@tailwindcss/postcss": "^4.0.13",
        "@testing-library/dom": "10.4.0",
        "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^16.1.0",
+        "@testing-library/react": "16.1.0",
        "@testing-library/user-event": "^14.6.1",
        "@types/js-cookie": "^3.0.6",
        "@types/node": "^22.12.0",
@@ -9051,9 +9051,9 @@
      "license": "MIT"
    },
    "node_modules/@testing-library/react": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.0.tgz",
-      "integrity": "sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==",
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.1.0.tgz",
+      "integrity": "sha512-Q2ToPvg0KsVL0ohND9A3zLJWcOXXcO8IDu3fj11KhNt0UlCWyFyvnCIBkd12tidB2lkiVRG8VFqdhcqhqnAQtg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
Author	SHA1	Message	Date
Hafid Nur	d5cfed24ca	fix(qr): fix empty state logic in the user management page	2026-02-17 18:47:27 +07:00
Hafid Nur	f018da21c1	fix(qr): add empty state for campaign & user management page to handle unexcepted null error	2026-02-17 18:38:47 +07:00
Hafid Nur	a610e180ba	fix(qr): update API url to https	2026-02-14 18:29:30 +07:00
Hafid Nur	ce8cb8188c	fix(qr): hardcode API url	2026-02-14 18:13:28 +07:00
maulanasdqn	3aaf022393	feat(infra): update to include all apps and CI/CD flow	2026-02-14 18:03:58 +07:00
Hafid Nur	ebe27a3f05	fix: update API endpoint for QR campaign app	2026-02-14 17:57:03 +07:00
maulanasdqn	f846a5a785	fix: use nodejs binary instead of nodejs_22 (cached)	2026-02-14 17:43:42 +07:00
maulanasdqnandClaude Opus 4.5	708cbde596	fix: update npmDepsHash for CI build 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-14 17:29:40 +07:00
Hafid NurandGitHub	9d37cba65f	Add a new app: QR code generator for campaign (#75 ) * Initialize a new NX project - QR campaign * Develop QR code generator app for campaign * Add deployment script Add Dockerfile, docker compose, and update Nix config for deployment * Revert package.json to fix ci * Revert package-lock.json to ensure ci (Nix build & cache) successful	2026-02-14 17:15:46 +07:00
				`@@ -0,0 +1 @@`
				`/nix/store/01x5k4nlxcpyd85nnr0b9gm89rm8ff4x-source`
				`@@ -0,0 +1 @@`
				`/nix/store/8hx8jwa24q6rkzhca9iqy5ckk9rbphi1-source`
				`@@ -0,0 +1 @@`
				`/nix/store/jizz7ld5r2w11y03wrmnvwsskc45krj9-source`
				`@@ -0,0 +1 @@`
				`/nix/store/yj1wxm9hh8610iyzqnz75kvs6xl8j3my-source`
				`@@ -0,0 +1 @@`
				`/nix/store/y4p9szcab9xd7v1c7k9ghr86hb6myyg4-nix-shell-env`