fix(pos): hide selfpay controls and normalize trend labels

2026-08-25 22:29:12 +02:00
parent f76591518e
commit 129584d738
13 changed files with 59 additions and 48 deletions
--- a/project/VERSION
+++ b/project/VERSION
@@ -1 +1 @@
-0.2.2
+0.2.3
--- a/project/apps/admin/package-lock.json
+++ b/project/apps/admin/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@mercadodevida/admin",
-  "version": "0.2.2",
+  "version": "0.2.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@mercadodevida/admin",
-      "version": "0.2.2",
+      "version": "0.2.3",
      "dependencies": {
        "@lexical/history": "^0.49.0",
        "@lexical/html": "^0.49.0",
--- a/project/apps/admin/package.json
+++ b/project/apps/admin/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mercadodevida/admin",
-  "version": "0.2.2",
+  "version": "0.2.3",
  "private": true,
  "scripts": {
    "dev": "next dev --port 3001",
--- a/project/apps/admin/src/components/reporting/TrendChart.tsx
+++ b/project/apps/admin/src/components/reporting/TrendChart.tsx
@@ -16,28 +16,36 @@ interface TrendChartProps {
 export function TrendChart({ data, maxValue, height = 120 }: TrendChartProps) {
  if (data.length === 0) return null;

-  const width = 100; // percentage-based SVG
-  const barWidth = Math.min(3, (width * 0.9) / data.length);
-  const gap = Math.max(0.2, (width - barWidth * data.length) / (data.length + 1));
-  const chartHeight = height - 34; // leave room for labels
+  const chartWidth = Math.max(420, data.length * 26);
+  const padding = { top: 12, right: 14, bottom: 28, left: 14 };
+  const plotWidth = chartWidth - padding.left - padding.right;
+  const chartHeight = Math.max(60, height - padding.top - padding.bottom);
+  const barWidth = Math.min(16, Math.max(7, (plotWidth / data.length) * 0.62));
+  const gap = Math.max(4, (plotWidth - barWidth * data.length) / Math.max(data.length + 1, 1));

  return (
    <div className="w-full overflow-x-auto rounded-xl bg-white">
      <svg
-        viewBox={`0 0 ${width} ${height}`}
-        className="block w-full"
-        style={{ minWidth: `${Math.max(360, data.length * 10)}px`, height: `${height}px` }}
-        preserveAspectRatio="none"
+        viewBox={`0 0 ${chartWidth} ${height}`}
+        className="block min-w-full"
+        style={{ width: '100%', minWidth: `${chartWidth}px`, height: `${height}px` }}
        aria-label="Tendencia de ventas"
        role="img"
      >
        {/* Y-axis baseline */}
-        <line x1="0" y1={chartHeight} x2={width} y2={chartHeight} stroke="#e5e7eb" strokeWidth="0.5" />
+        <line
+          x1={padding.left}
+          y1={padding.top + chartHeight}
+          x2={chartWidth - padding.right}
+          y2={padding.top + chartHeight}
+          stroke="#e5e7eb"
+          strokeWidth="1"
+        />

        {data.map((point, i) => {
          const barH = maxValue > 0 ? (point.value / maxValue) * chartHeight : 0;
-          const x = gap + i * (barWidth + gap);
-          const y = chartHeight - barH;
+          const x = padding.left + gap + i * (barWidth + gap);
+          const y = padding.top + chartHeight - barH;

          return (
            <g key={i} className="group">
@@ -48,16 +56,16 @@ export function TrendChart({ data, maxValue, height = 120 }: TrendChartProps) {
                width={barWidth}
                height={barH}
                fill="#2D6A4F"
-                rx="1"
+                rx="3"
                className="transition-all duration-200 hover:fill-[#245a42]"
              />
-              {/* Label (show every ~7 bars or if narrow) */}
              {data.length <= 31 && (
                <text
                  x={x + barWidth / 2}
-                  y={height - 2}
+                  y={height - 8}
                  textAnchor="middle"
-                  fontSize="2.5"
+                  fontSize="11"
+                  fontWeight="500"
                  fill="#9ca3af"
                >
                  {point.label.slice(5, 10)}
--- a/project/apps/pos/package-lock.json
+++ b/project/apps/pos/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "mercadodevida-pos",
-  "version": "0.2.2",
+  "version": "0.2.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "mercadodevida-pos",
-      "version": "0.2.2",
+      "version": "0.2.3",
      "dependencies": {
        "next": "^16.3.1",
        "react": "^19.2.8",
--- a/project/apps/pos/package.json
+++ b/project/apps/pos/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mercadodevida-pos",
-  "version": "0.2.2",
+  "version": "0.2.3",
  "private": true,
  "scripts": {
    "dev": "next dev --port 3002",
--- a/project/apps/pos/src/app/(terminal)/page.tsx
+++ b/project/apps/pos/src/app/(terminal)/page.tsx
@@ -65,7 +65,7 @@ interface Config {
  terminal: {
    id: string;
    name: string;
-    settings?: { lineDiscountsEnabled?: boolean } & Record<string, unknown>;
+    settings?: { lineDiscountsEnabled?: boolean; selfpayMode?: boolean } & Record<string, unknown>;
  };
  store: { id: string; name: string };
  paymentMethods: PaymentMethod[];
@@ -439,7 +439,8 @@ export default function RegisterPage() {
  }, [cart]);
  const paidCents = payments.reduce((sum, payment) => sum + payment.amountCents, 0);
  const remainingCents = Math.max(0, totals.total - paidCents);
-  const lineDiscountsEnabled = config?.terminal.settings?.lineDiscountsEnabled !== false;
+  const isSelfpayMode = config?.terminal.settings?.selfpayMode === true;
+  const lineDiscountsEnabled = !isSelfpayMode && config?.terminal.settings?.lineDiscountsEnabled !== false;

  const applyDiscount = (lineId: string, discountCents: number) => {
    setCart((current) =>
@@ -921,7 +922,7 @@ export default function RegisterPage() {

  return (
    <div className="flex h-screen" style={{ '--color-primary': '#2D6A4F' } as React.CSSProperties}>
-      {showSidebar && (
+      {!isSelfpayMode && showSidebar && (
      <aside
        className="hidden w-[380px] shrink-0 flex-col border-r bg-gray-50 p-3 lg:flex"
        aria-label="Pedidos"
@@ -1200,6 +1201,7 @@ export default function RegisterPage() {
        <div className="mb-3">
          <div className="mb-2 flex items-center gap-3">
            {/* Panel toggle button - LEFT */}
+            {!isSelfpayMode && (
              <button
                type="button"
                onClick={() => setShowSidebar((v) => !v)}
@@ -1211,6 +1213,7 @@ export default function RegisterPage() {
                </svg>
                {showSidebar ? 'Ocultar' : 'Panel'}
              </button>
+            )}

            {/* Store name */}
            <span className="text-sm font-bold text-[#2D6A4F]">{config.store.name}</span>
@@ -1234,7 +1237,7 @@ export default function RegisterPage() {
              {currentTime.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' })}
            </span>

-            {!config?.terminal?.settings?.selfpayMode && (
+            {!isSelfpayMode && (
              <button
                type="button"
                onClick={() => {
@@ -1588,7 +1591,7 @@ export default function RegisterPage() {
            <span>Subtotal</span>
            <span>{formatPrice(totals.subtotal)}</span>
          </div>
-          {totals.discount > 0 && (
+          {!isSelfpayMode && totals.discount > 0 && (
            <div className="flex justify-between text-red-600">
              <span>Descuentos</span>
              <span>−{formatPrice(totals.discount)}</span>
@@ -1689,7 +1692,7 @@ export default function RegisterPage() {
        </button>
      </aside>

-      {showDiscountPanel && selectedItem && (
+      {!isSelfpayMode && showDiscountPanel && selectedItem && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
          <DiscountPanel
            unitPriceCents={selectedItem.unitPriceCents}
--- a/project/frontend/package-lock.json
+++ b/project/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "frontend",
-  "version": "0.2.2",
+  "version": "0.2.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "frontend",
-      "version": "0.2.2",
+      "version": "0.2.3",
      "dependencies": {
        "next": "16.3.1",
        "react": "19.2.8",
--- a/project/frontend/package.json
+++ b/project/frontend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "frontend",
-  "version": "0.2.2",
+  "version": "0.2.3",
  "private": true,
  "scripts": {
    "dev": "next dev",
--- a/project/package-lock.json
+++ b/project/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "mercadodevida-backend",
-  "version": "0.2.2",
+  "version": "0.2.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "mercadodevida-backend",
-      "version": "0.2.2",
+      "version": "0.2.3",
      "dependencies": {
        "@fastify/cookie": "^11.1.2",
        "@fastify/cors": "^11.3.0",
--- a/project/package.json
+++ b/project/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mercadodevida-backend",
-  "version": "0.2.2",
+  "version": "0.2.3",
  "private": true,
  "type": "module",
  "description": "mercadodevida vNext backend - modular monolith skeleton",
--- a/project/storefront/package-lock.json
+++ b/project/storefront/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "mercadodevida-storefront",
-  "version": "0.2.2",
+  "version": "0.2.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "mercadodevida-storefront",
-      "version": "0.2.2",
+      "version": "0.2.3",
      "dependencies": {
        "@tailwindcss/postcss": "^4.1.17",
        "next": "^16.0.5",
--- a/project/storefront/package.json
+++ b/project/storefront/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mercadodevida-storefront",
-  "version": "0.2.2",
+  "version": "0.2.3",
  "private": true,
  "type": "module",
  "description": "mercadodevida customer storefront shell",
@@ -1 +1 @@
 .2.2
 .2.3