"use client";

import { clsx, ModelDashboardProps, ModelInsightProps } from "@akanjs/client";

import { getQueryMap } from "@akanjs/constant";

import { cnst, IcecreamOrder, st } from "@myapp/client";

import { Data, Model } from "@akanjs/ui";

// ... existing code ...

interface ViewWrapperProps {

  className?: string;

  children: React.ReactNode;

  icecreamOrderId: string;

}

export const ViewWrapper = ({ className, children, icecreamOrderId }: ViewWrapperProps) => {

  return (

    <>

      <div

        className={clsx("cursor-pointer", className)}

        onClick={() => {

          st.do.viewIcecreamOrder(icecreamOrderId);

        }}

      >

        {children}

      </div>

      <Model.ViewModal

        sliceName="icecreamOrder"

        id={icecreamOrderId}

        renderView={(icecreamOrder: cnst.IcecreamOrder) => <IcecreamOrder.View.General icecreamOrder={icecreamOrder} />}

      />

    </>

  );

};

import { clsx, ModelProps } from "@akanjs/client";

import { cnst, IcecreamOrder, usePage } from "@myapp/client";

export const Card = ({ icecreamOrder }: ModelProps<"icecreamOrder", cnst.LightIcecreamOrder>) => {

  const { l } = usePage();

  return (

    <div className="animate-fadeIn group flex h-36 w-full overflow-hidden rounded-xl bg-gradient-to-br from-pink-100 via-yellow-50 to-pink-200 px-8 py-6 shadow-md transition-all duration-300 hover:shadow-xl">

      <div className="flex w-full flex-col justify-center">

        <div className="flex items-center gap-2 text-lg font-semibold text-pink-700">

          <span className="inline-block rounded bg-pink-200 px-2 py-1 text-xs font-bold tracking-wider uppercase">

            {l.field("icecreamOrder", "id")}

          </span>

          <span className="ml-2 font-mono text-pink-900">{icecreamOrder.id}</span>

        </div>

        <div className="mt-4 flex items-center gap-2">

          <span className="inline-block rounded bg-yellow-200 px-2 py-1 text-xs font-bold tracking-wider text-yellow-800 uppercase">

            {l.field("icecreamOrder", "status")}

          </span>

          <span

            className={clsx("ml-2 rounded-full px-3 py-1 text-sm font-semibold", {

              "bg-green-100 text-green-700": icecreamOrder.status === "active",

              "bg-blue-100 text-blue-700": icecreamOrder.status === "processing",

              "bg-red-100 text-red-700": icecreamOrder.status === "served",

            })}

          >

            {l.enum("icecreamOrder", "status", icecreamOrder.status)}

          </span>

        </div>

      </div>

      <div className="flex items-center justify-center">

        <IcecreamOrder.Util.ViewWrapper icecreamOrderId={icecreamOrder.id}>

          <button className={clsx("btn btn-primary btn-xl")}>

            <span>View</span>

          </button>

        </IcecreamOrder.Util.ViewWrapper>

      </div>

    </div>

  );

};

import { clsx } from "@akanjs/client";

import { cnst, usePage } from "@myapp/client";

interface IcecreamOrderViewProps {

  className?: string;

  icecreamOrder: cnst.IcecreamOrder;

}

export const General = ({ className, icecreamOrder }: IcecreamOrderViewProps) => {

  const { l } = usePage();

  return (

    <div className={clsx(className, "animate-fadeIn mx-auto w-full space-y-6 rounded-xl p-8 shadow-lg")}>

      <div className="flex items-center gap-3 border-b pb-4">

        <span className="text-3xl font-extrabold text-pink-600">🍦</span>

        <span className="text-2xl font-bold">{l("icecreamOrder.modelName")}</span>

        <span className="text-base-content/50 ml-auto text-xs">#{icecreamOrder.id}</span>

      </div>

      <div className="grid grid-cols-2 gap-x-6 gap-y-4">

        <div className="text-base-content/50 font-semibold">{l.field("icecreamOrder", "size")}</div>

        <div>{l.enum("icecreamOrder", "size", icecreamOrder.size.toString())}</div>

        <div className="text-base-content/50 font-semibold">{l.field("icecreamOrder", "toppings")}</div>

        <div className="flex flex-wrap gap-2">

          {icecreamOrder.toppings.length === 0 ? (

            <span className="text-gray-400 italic">X</span>

          ) : (

            icecreamOrder.toppings.map((topping) => (

              <span

                key={topping}

                className="inline-block rounded-full bg-pink-100 px-2 py-1 text-xs font-medium text-pink-700"

              >

                {l.enum("icecreamOrder", "toppings", topping)}

              </span>

            ))

          )}

        </div>

        <div className="text-base-content/50 font-semibold">{l.field("icecreamOrder", "status")}</div>

        <div>

          <span

            className={clsx(

              "inline-block rounded-full px-2 py-1 text-xs font-semibold",

              icecreamOrder.status === "active"

                ? "bg-green-100 text-green-700"

                : icecreamOrder.status === "processing"

                  ? "bg-yellow-100 text-yellow-700"

                  : "bg-blue-100 text-blue-700"

            )}

          >

            {l.enum("icecreamOrder", "status", icecreamOrder.status)}

          </span>

        </div>

        <div className="text-base-content/50 font-semibold">{l.field("icecreamOrder", "createdAt")}</div>

        <div className="text-gray-500">{icecreamOrder.createdAt.format("YYYY-MM-DD HH:mm:ss")}</div>

        <div className="text-base-content/50 font-semibold">{l.field("icecreamOrder", "updatedAt")}</div>

        <div className="text-gray-500">{icecreamOrder.updatedAt.format("YYYY-MM-DD HH:mm:ss")}</div>

      </div>

    </div>

  );

};