other

Dockerfile

@@ -7,10 +7,16 @@ RUN npm install --force
 
 COPY . .
 
+# Install git, get commit hash
+RUN apk add --no-cache git \
+    && git rev-parse --short HEAD > /app/git_commit_sha
+
 ENV NEXT_PUBLIC_API_URL=/api
 
 # Build the Next.js application
-RUN npm run build
+# The environment variable will be available during build if needed
+# ENV GIT_COMMIT_SHA=$(cat /app/git_commit_sha)
+RUN echo "Building with GIT_COMMIT_SHA=$(cat /app/git_commit_sha)" && npm run build
 
 # ---- Production Stage ----
 FROM node:18-alpine AS runner
@@ -25,12 +31,18 @@ COPY --from=builder /app/package.json /app/package-lock.json ./
 COPY --from=builder /app/.next ./.next
 COPY --from=builder /app/node_modules ./node_modules
 
+# Copy commit hash file from builder stage
+COPY --from=builder /app/git_commit_sha /app/git_commit_sha
+
 EXPOSE 3000
 
 ENV NODE_ENV=production
 ENV NEXT_PUBLIC_API_URL=/api
 ENV SERVER_API_URL=https://internal-api.inboxi.ng/api
 
+# Set GIT_COMMIT_SHA environment variable in the final image by reading the file
+ENV GIT_COMMIT_SHA="$(cat /app/git_commit_sha)"
+
 
 # Start Next.js server
 CMD ["npm", "run", "start"]

app/dashboard/page.tsx

@@ -1,6 +1,9 @@
 import Dashboard from "@/components/dashboard/dashboard";
 import Content from "@/components/dashboard/content";
 import { fetchServer } from '@/lib/server-service';
+import { performance } from 'perf_hooks';
+import { Info } from 'lucide-react';
+import packageJson from '../../package.json';
 
 // ✅ Corrected Vendor Type
 interface Vendor {
@@ -23,16 +26,28 @@ interface OrderStats {
 }
 
 export default async function DashboardPage() {
+  const startTime = performance.now();
+
   const [userResponse, orderStats] = await Promise.all([
     fetchServer<User>("/auth/me"),
     fetchServer<OrderStats>("/orders/stats"),
   ]);
 
+  const endTime = performance.now();
+  const generationTime = (endTime - startTime).toFixed(2);
+  const panelVersion = packageJson.version;
+
   const vendor = userResponse.vendor; 
 
   return (
     <Dashboard>
       <Content username={vendor.username} orderStats={orderStats} />
+      <div className="fixed bottom-2 right-2 text-xs text-muted-foreground bg-background/80 backdrop-blur-sm px-2 py-1 rounded border border-border/50 z-50 flex items-center gap-1.5">
+        <Info size={12} className="text-muted-foreground/80" /> 
+        <span>v{panelVersion}</span>
+        <span className="text-muted-foreground/50">|</span>
+        <span>Generated in {generationTime}ms</span>
+      </div>
     </Dashboard>
   );
 }

app/dashboard/storefront/customers/page.tsx

@@ -53,16 +53,6 @@ import {
 
 import type { Metadata, Viewport } from 'next';
 
-export const metadata: Metadata = {
-  title: "Customer Management - Ember",
-};
-
-export const viewport: Viewport = {
-  themeColor: "#000000",
-  initialScale: 1,
-  width: 'device-width',
-};
-
 export default function CustomerManagementPage() {
   const router = useRouter();
   const [customers, setCustomers] = useState<CustomerStats[]>([]);