DEV Community: Vytroo

NextJS Consume api

Vytroo — Thu, 10 Apr 2025 23:02:07 +0000

// pages/login.js
import { useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { setToken, isAuthenticated } from "@/utils/auth";

import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";

const formSchema = z.object({
  username: z.string().min(1, "Username is required"),
  password: z.string().min(5, "Password must be at least 5 characters long"),
});

export default function LoginPage({ serverError }) {
  const router = useRouter();
  const [errorMessage, setErrorMessage] = useState(serverError || "");
  const [isLoading, setIsLoading] = useState(false);

  const form = useForm({
    defaultValues: {
      username: "",
      password: "",
    },
    resolver: zodResolver(formSchema),
  });

  const onSubmit = async (data) => {
    setErrorMessage("");
    setIsLoading(true);

    try {
      const response = await fetch("http://localhost:8000/api/login/", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
        credentials: 'include', // Penting untuk cookies
      });

      const result = await response.json();

      if (!response.ok) {
        throw new Error(result.message || "Login failed. Please check your credentials.");
      }

      // Simpan token di cookie dan localStorage
      setToken(result.access);

      router.push("/menu");
    } catch (error) {
      setErrorMessage(error.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center w-full">
      <div className="max-w-xs w-full flex flex-col items-center">
        <p className="mt-4 mb-8.5 text-xl font-bold tracking-tight">
          Log in to RestoKu
        </p>

        {errorMessage && (
          <div className="bg-red-50 text-red-600 p-3 rounded mb-4 text-sm w-full">
            {errorMessage}
          </div>
        )}

        <Form {...form}>
          <form
            className="w-full space-y-4"
            onSubmit={form.handleSubmit(onSubmit)}
          >
            <FormField
              control={form.control}
              name="username"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Username</FormLabel>
                  <FormControl>
                    <Input
                      type="text"
                      placeholder="Username"
                      className="w-full"
                      disabled={isLoading}
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Password</FormLabel>
                  <FormControl>
                    <Input
                      type="password"
                      placeholder="Password"
                      className="w-full"
                      disabled={isLoading}
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button 
              type="submit" 
              className="mt-4 w-full"
              disabled={isLoading}
            >
              {isLoading ? "Logging in..." : "Login"}
            </Button>
          </form>
        </Form>
        <div className="mt-5 space-y-5">
          <Link
            href="/forgot-password"
            className="text-sm block underline text-muted-foreground text-center"
          >
            Forgot your password?
          </Link>
          <p className="text-sm text-center">
            Don&apos;t have an account?
            <Link href="/register" className="ml-1 underline text-muted-foreground">
              Create account
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
}

export async function getServerSideProps(context) {
  // Cek jika pengguna sudah terautentikasi
  if (isAuthenticated(context)) {
    return {
      redirect: {
        destination: '/menu',
        permanent: false,
      },
    };
  }

  const { error } = context.query;

  return {
    props: {
      serverError: error || null,
    },
  };
}

utils/auth

// utils/auth.js
import Cookies from 'js-cookie';
import { parseCookies } from 'nookies';

// Fungsi untuk menyimpan token di cookies dan localStorage (untuk kompatibilitas)
export const setToken = (token) => {
  if (typeof window !== 'undefined') {
    // Client-side
    localStorage.setItem('adminToken', token);
    // Mengatur cookie dengan secure flag, httpOnly untuk produksi
    Cookies.set('adminToken', token, { expires: 7 }); // Expires in 7 days
  }
};

// Fungsi untuk mendapatkan token
export const getToken = (ctx) => {
  // Server-side
  if (ctx) {
    const cookies = parseCookies(ctx);
    return cookies.adminToken;
  }

  // Client-side
  if (typeof window !== 'undefined') {
    return Cookies.get('adminToken') || localStorage.getItem('adminToken');
  }

  return null;
};

// Fungsi untuk menghapus token saat logout
export const removeToken = () => {
  if (typeof window !== 'undefined') {
    localStorage.removeItem('adminToken');
    Cookies.remove('adminToken');
  }
};

// Fungsi untuk memeriksa apakah pengguna sudah terautentikasi
export const isAuthenticated = (ctx) => {
  const token = getToken(ctx);
  return !!token;
};

// pages/menu.tsx
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { PlusIcon } from "lucide-react";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { getToken, removeToken } from "@/utils/auth";
import { redirect } from 'next/navigation';
import { cookies } from 'next/headers';

interface Menuitem {
  id_menu: number;
  nama_menu: string;
  harga: number;
  menu_image: string;
  id_kategori: number;
}

async function getMenuData() {
  const token = getToken({ req: { headers: { cookie: cookies().toString() } });

  if (!token) {
    redirect('/login');
  }

  try {
    const response = await fetch("http://127.0.0.1:8000/api/menu/", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
      cache: 'no-store'
    });

    if (response.status === 401) {
      removeToken();
      redirect('/login');
    }

    if (!response.ok) {
      throw new Error('Failed to fetch menu data');
    }

    return await response.json();
  } catch (error) {
    console.error("Error fetching menu data:", error);
    return [];
  }
}

export default async function MenuPage() {
  const menus: Menuitem[] = await getMenuData();

  async function handleAddMenu(formData: FormData) {
    'use server';

    const token = getToken({ req: { headers: { cookie: cookies().toString() } });

    if (!token) {
      redirect('/login');
    }

    const namaMenu = formData.get('nama_menu') as string;
    const harga = formData.get('harga') as string;
    const kategori = formData.get('id_kategori') as string;
    const imageFile = formData.get('menu_image') as File;

    const postData = new FormData();
    postData.append('nama_menu', namaMenu);
    postData.append('harga', harga);
    postData.append('id_kategori', kategori);

    if (imageFile.size > 0) {
      postData.append('menu_image', imageFile);
    }

    try {
      const response = await fetch("http://127.0.0.1:8000/api/menu/", {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
        },
        body: postData,
      });

      if (response.status === 401) {
        removeToken();
        redirect('/login');
      }

      if (!response.ok) {
        throw new Error('Failed to add menu');
      }

      redirect('/menu');
    } catch (error) {
      console.error("Error adding menu:", error);
      throw error;
    }
  }

  return (
    <div className="max-w-screen-lg w-full py-10 px-6">
      <div className="flex justify-between items-center">
        <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mb-4">
          Daftar Menu
        </h1>
        <form action="/logout" method="POST">
          <Button type="submit" variant="outline">
            Logout
          </Button>
        </form>
      </div>

      <Dialog>
        <DialogTrigger asChild>
          <Button
            variant="outline"
            size="icon"
            className="w-[140px] font-normal bg-gray-100"
          >
            <PlusIcon className="mr-2" /> Tambah Menu
          </Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Tambah Menu Baru</DialogTitle>
          </DialogHeader>

          <form action={handleAddMenu}>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="nama" className="text-right">
                  Nama
                </Label>
                <Input
                  id="nama"
                  name="nama_menu"
                  className="col-span-3"
                  required
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="harga" className="text-right">
                  Harga
                </Label>
                <Input
                  id="harga"
                  name="harga"
                  type="number"
                  className="col-span-3"
                  required
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="kategori" className="text-right">
                  Kategori
                </Label>
                <Input
                  id="kategori"
                  name="id_kategori"
                  type="number"
                  defaultValue="1"
                  className="col-span-3"
                  required
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="gambar" className="text-right">
                  Gambar
                </Label>
                <Input
                  id="gambar"
                  name="menu_image"
                  type="file"
                  accept="image/*"
                  className="col-span-3"
                />
              </div>
            </div>

            <DialogFooter>
              <Button type="submit">Simpan</Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      <div className="mt-8 w-full mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-8">
        {menus.map((menu) => (
          <Card
            key={menu.id_menu}
            className="flex flex-col border rounded-xl overflow-hidden shadow-none"
          >
            <CardHeader>
              <h4 className="!mt-3 text-xl font-semibold tracking-tight">
                {menu.nama_menu}
              </h4>
              <p className="mt-1 text-muted-foreground text-[17px]">
                Rp {menu.harga.toLocaleString()}
              </p>
            </CardHeader>
            <CardContent className="mt-auto px-0 pb-0">
              <div>
                <img
                  src={menu.menu_image}
                  alt={menu.nama_menu}
                  className="bg-muted h-40 ml-6 rounded-tl-xl object-cover w-[calc(100%-1.5rem)]"
                />
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

meja

// app/features-02/page.tsx
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { PlusIcon } from "lucide-react";
import { getToken, removeToken } from "@/utils/auth";
import { redirect } from 'next/navigation';
import { cookies } from 'next/headers';

interface MejaItem {
  id_meja: number;
  no_meja: number;
  kapasitas: number;
  image_meja: string;
}

async function getMejaData() {
  const token = getToken({ req: { headers: { cookie: cookies().toString() } });

  if (!token) {
    redirect('/login');
  }

  try {
    const response = await fetch("http://127.0.0.1:8000/api/meja/", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
      cache: 'no-store'
    });

    if (response.status === 401) {
      removeToken();
      redirect('/login');
    }

    if (!response.ok) {
      throw new Error('Failed to fetch table data');
    }

    return await response.json();
  } catch (error) {
    console.error("Error fetching table data:", error);
    return [];
  }
}

export default async function Features02Page() {
  const mejas: MejaItem[] = await getMejaData();

  async function handleAddTable(formData: FormData) {
    'use server';

    const token = getToken({ req: { headers: { cookie: cookies().toString() } });

    if (!token) {
      redirect('/login');
    }

    const no_meja = formData.get('no_meja') as string;
    const kapasitas = formData.get('kapasitas') as string;
    const imageFile = formData.get('image_meja') as File;

    const postData = new FormData();
    postData.append('no_meja', no_meja);
    postData.append('kapasitas', kapasitas);

    if (imageFile.size > 0) {
      postData.append('image_meja', imageFile);
    }

    try {
      const response = await fetch("http://127.0.0.1:8000/api/meja/", {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
        },
        body: postData,
      });

      if (response.status === 401) {
        removeToken();
        redirect('/login');
      }

      if (!response.ok) {
        throw new Error('Failed to add table');
      }

      redirect('/features-02');
    } catch (error) {
      console.error("Error adding table:", error);
      throw error;
    }
  }

  return (
    <div className="min-h-screen flex justify-center py-12">
      <div className="w-full">
        <div className="flex justify-between items-center px-6">
          <h2 className="text-4xl sm:text-5xl font-bold tracking-tight mb-14 text-center">
            Daftar Meja
          </h2>
          <form action="/logout" method="POST">
            <Button type="submit" variant="outline">
              Logout
            </Button>
          </form>
        </div>

        <div className="ml-[315px]">
          <Dialog>
            <DialogTrigger asChild>
              <Button
                variant="outline"
                size="icon"
                className="w-[140px] font-normal bg-gray-100"
              >
                <PlusIcon className="mr-2" /> Tambah Meja
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Tambah Meja Baru</DialogTitle>
              </DialogHeader>

              <form action={handleAddTable}>
                <div className="grid gap-4 py-4">
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="no_meja" className="text-right">
                      No Meja
                    </Label>
                    <Input
                      id="no_meja"
                      name="no_meja"
                      className="col-span-3"
                      required
                    />
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="kapasitas" className="text-right">
                      Kapasitas
                    </Label>
                    <Input
                      id="kapasitas"
                      name="kapasitas"
                      type="number"
                      className="col-span-3"
                      required
                    />
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="gambar" className="text-right">
                      Gambar
                    </Label>
                    <Input
                      id="gambar"
                      name="image_meja"
                      type="file"
                      accept="image/*"
                      className="col-span-3"
                    />
                  </div>
                </div>

                <DialogFooter>
                  <Button type="submit">Simpan</Button>
                </DialogFooter>
              </form>
            </DialogContent>
          </Dialog>
        </div>

        <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-12 max-w-md sm:max-w-screen-md lg:max-w-screen-lg w-full mx-auto px-6">
          {mejas.map((meja) => (
            <div key={meja.id_meja} className="flex flex-col text-start">
              <div>
                <img
                  src={meja.image_meja}
                  alt={`Meja ${meja.no_meja}`}
                  className="mb-5 sm:mb-6 w-full aspect-[3/3] bg-muted rounded-xl object-cover"
                />
              </div>
              <span className="text-2xl font-semibold tracking-tight">
                Nomor Meja: {meja.no_meja}
              </span>
              <p className="mt-2 max-w-[25ch] text-muted-foreground text-[17px]">
                Kapasitas: {meja.kapasitas} orang
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Flutter consume api login

Vytroo — Thu, 10 Apr 2025 12:16:40 +0000

cors di api

ALLOWED_HOSTS = ['*']
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://localhost:54475",
    "http://10.0.2.2:8000",
    "http://127.0.0.1:8000",   
    "http://192.168.118.247:8000",  
    'http://192.168.1.5:8000',
    'http://10.0.2.2', 
    'http://10.0.2.2:8000', 
]

main


import 'package:flutter/material.dart';
import 'screens/login_screen.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Reservasi Meja',
      home: LoginScreen(),
    );
  }
}

/lib/screens/login_Screen.dart

import 'package:flutter/material.dart';
import '../services/api_service.dart';
import 'menu_screen.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final usernameController = TextEditingController();
  final passwordController = TextEditingController();

  void login() async {
    final token = await ApiService.login(
      usernameController.text,
      passwordController.text,
    );
    if (token != null) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => MenuScreen(token: token)),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Login gagal')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login')),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            TextField(controller: usernameController, decoration: InputDecoration(labelText: 'Username')),
            TextField(controller: passwordController, decoration: InputDecoration(labelText: 'Password'), obscureText: true),
            SizedBox(height: 20),
            ElevatedButton(onPressed: login, child: Text('Login')),
          ],
        ),
      ),
    );
  }
}

screens/menu_screen

import 'package:flutter/material.dart';
import '../services/api_service.dart';
import '../models/menu_models.dart';

class MenuScreen extends StatelessWidget {
  final String token;
  const MenuScreen({super.key, required this.token});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Daftar Menu')),
      body: FutureBuilder<List<MenuModel>>(
        future: ApiService.getMenu(token),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) return Center(child: CircularProgressIndicator());
          if (!snapshot.hasData || snapshot.data!.isEmpty) return Center(child: Text('Tidak ada menu'));
          final menuList = snapshot.data!;

          return ListView(
            children: [
              ...menuList.map((m) => ListTile(
                    title: Text(m.nama_menu),
                    subtitle: Text('Rp ${m.harga}'),
                  )),

            ],
          );
        },
      ),
    );
  }
}

/services/api_service

import 'dart:convert';
import 'package:http/http.dart' as http;
import '../models/menu_models.dart';

class ApiService {
  static const baseUrl = 'http://10.0.2.2:8000/api';

  static Future<String?> login(String username, String password) async {
    final response = await http.post(
      Uri.parse('$baseUrl/login/'),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode({'username': username, 'password': password}),
    );
    if (response.statusCode == 200) {
      final json = jsonDecode(response.body);
      return json['access'];
    }
    return null;
  }

  static Future<List<MenuModel>> getMenu(String token) async {
    final response = await http.get(
      Uri.parse('$baseUrl/menu/'),
      headers: {'Authorization': 'Bearer $token'},
    );
    if (response.statusCode == 200) {
      return (jsonDecode(response.body) as List)
          .map((e) => MenuModel.fromJson(e))
          .toList();
    }
    throw Exception('Failed to load menus');

  }

  // static Future<List<MejaModel>> getMeja(String token) async {
  //   final response = await http.get(
  //     Uri.parse('$baseUrl/meja/'),
  //     headers: {'Authorization': 'Bearer $token'},
  //   );
  //   if (response.statusCode == 200) {
  //     final List data = jsonDecode(response.body);
  //     return data.map((e) => MejaModel.fromJson(e)).toList();
  //   }
  //   return [];
  // }

  static Future<void> updateMeja(String token, int id, String status) async {
    await http.patch(
      Uri.parse('$baseUrl/meja/$id/'),
      headers: {
        'Authorization': 'Bearer $token',
        'Content-Type': 'application/json',
      },
      body: jsonEncode({"status": status}),
    );
  }
}

models/menu_models

class MenuModel {
  final int id_menu;
  final String nama_menu;
  final double harga;
  final int stok;
  final String foto;
  MenuModel(
      {required this.id_menu,
      required this.nama_menu,
      required this.harga,
      required this.foto,
      required this.stok});

  factory MenuModel.fromJson(Map json) {
    return MenuModel(
        id_menu: json['id_menu'],
        nama_menu: json['nama_menu'],
        harga: double.tryParse(json['harga'].toString()) ?? 0.0,
        stok: json['stok'],
        foto: json['foto']);
  }
  Map toJson() => {
        'id_menu': id_menu,
        'nama_menu': nama_menu,
        'harga': harga,
        'stok': stok,
        'foto': foto,
      };
}

// ==== models/meja_model.dart ====
class MejaModel {
  final int? id;
  final int noMeja;
  final int kapasitas;
  final String status;

  MejaModel(
      {this.id,
      required this.noMeja,
      required this.kapasitas,
      required this.status});

  factory MejaModel.fromJson(Map<String, dynamic> json) {
    return MejaModel(
      id: json['id'],
      noMeja: json['no_meja'],
      kapasitas: json['kapasitas'],
      status: json['status'],
    );
  }
}

menu extend

import 'package:flutter/material.dart';
import '../services/api_service.dart';
import '../models/menu_models.dart';

class MenuScreen extends StatelessWidget {
  final String token;
  const MenuScreen({super.key, required this.token});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Menu Makanan')),
      body: FutureBuilder<List<MenuModel>>(
        future: ApiService.getMenu(token),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) return Center(child: CircularProgressIndicator());
          if (!snapshot.hasData || snapshot.data!.isEmpty) return Center(child: Text('Tidak ada menu tersedia'));

          final menuList = snapshot.data!;

          return Padding(
            padding: const EdgeInsets.all(12.0),
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 12,
                mainAxisSpacing: 12,
                childAspectRatio: 0.75,
              ),
              itemCount: menuList.length,
              itemBuilder: (context, index) {
                final m = menuList[index];
                return Card(
                  elevation: 4,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // Foto Menu
                      ClipRRect(
                        borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
                        child: Image.network(
                          m.foto,
                          height: 110,
                          width: double.infinity,
                          fit: BoxFit.cover,
                          errorBuilder: (context, error, stackTrace) => Container(
                            height: 110,
                            color: Colors.grey[300],
                            child: Icon(Icons.image_not_supported),
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              m.nama_menu,
                              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                            ),
                            SizedBox(height: 4),
                            Text('Rp ${m.harga.toStringAsFixed(0)}'),
                            Text('Stok: ${m.stok}'),
                            SizedBox(height: 8),
                            ElevatedButton(
                              onPressed: () {
                                // TODO: Tambahkan logika tambah ke keranjang atau pesan
                                ScaffoldMessenger.of(context).showSnackBar(
                                  SnackBar(content: Text('${m.nama_menu} ditambahkan ke pesanan')),
                                );
                              },
                              style: ElevatedButton.styleFrom(
                                minimumSize: Size(double.infinity, 36),
                                backgroundColor: Colors.green,
                              ),
                              child: Text('Pesan'),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          );
        },
      ),

      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          // TODO: Buka halaman keranjang
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('Menuju halaman keranjang...')),
          );
        },
        label: Text('Keranjang'),
        icon: Icon(Icons.shopping_cart),
      ),
    );
  }
}

Fitur Restoran NextJS

Vytroo — Mon, 07 Apr 2025 14:23:13 +0000

data-table

✅ 1. Masalah Edit dan Delete Belum Berfungsi
Di getUserColumns, kamu cuma nge-console.log saat tombol edit/delete diklik:

const columns = getUserColumns(
  (r) => console.log("Update", r),
  (r) => console.log("Delete", r)
);

🔧 Solusi:
Tambahkan state dan handler di UserTable untuk memicu edit/delete yang sesungguhnya:

const [editingUser, setEditingUser] = useState<User | null>(null);

const handleUpdateClick = (user: User) => {
  setEditingUser(user);
  setUSername(user.username);
  setPassword(user.password);
  setNo(user.no_hp);
  setStatus(user.status);
  setAlamat(user.alamat);
  setEmail(user.email.toString());
};

const handleDeleteClick = async (user: User) => {
  const token = localStorage.getItem("adminToken");
  try {
    const res = await fetch(`http://localhost:8000/api/user/${user.username}`, {
      method: "DELETE",
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
    if (!res.ok) throw new Error("Gagal hapus user");

    setData((prev) => prev.filter((u) => u.username !== user.username));
  } catch (err) {
    console.log("Delete Error", err);
  }
};

Ganti pemanggilan fungsi ini di bawah:

const columns = getUserColumns(handleUpdateClick, handleDeleteClick);

✅ 2. Tombol Submit Tidak Memperbarui User Jika Mode Edit

Sekarang handleSubmit hanya menambah user baru. Kalau kamu sedang edit, perlu membedakan logic-nya.

🔧 Solusi:

Modifikasi handleSubmit:

const handleSubmit = async () => {
  const formData = new FormData();
  formData.append("username", username);
  formData.append("password", password);
  formData.append("no_hp", no_hp);
  formData.append("status", status);
  formData.append("alamat", alamat);
  formData.append("email", email);

  const token = localStorage.getItem("adminToken");

  try {
    const url = editingUser
      ? `http://127.0.0.1:8000/api/user/${editingUser.username}`
      : "http://127.0.0.1:8000/api/user/";
    const method = editingUser ? "PUT" : "POST";

    const response = await fetch(url, {
      method,
      headers: {
        Authorization: `Bearer ${token}`,
      },
      body: formData,
    });

    if (!response.ok) {
      throw new Error("Gagal simpan data");
    }

    const newUser = await response.json();

    if (editingUser) {
      // Update data di list
      setData((prev) =>
        prev.map((u) => (u.username === editingUser.username ? newUser : u))
      );
    } else {
      // Tambahkan user baru
      setData((prev) => [...prev, newUser]);
    }

    // Reset form
    setUSername("");
    setPassword("");
    setStatus("");
    setAlamat("");
    setNo("");
    setEmail("");
    setEditingUser(null);
  } catch (err) {
    console.log("Submit Error", err);
  }
};

✅ 3. Tampilkan Nama Dialog Berubah Saat Edit

Ganti bagian ini:

<DialogTitle>Tambahkan User</DialogTitle>

Menjadi:

<DialogTitle>{editingUser ? "Edit User" : "Tambahkan User"}</DialogTitle>

✅ 4. Bug Minor: Tipe Email

Kamu pakai email: number; di User, padahal email itu string.

export type User = {
  username: string;
  password: string;
  email: string; // ini sebelumnya number
  no_hp: string;
  status: string;
  alamat: string;
};

Kalau kamu butuh bantuin struktur update endpoint dari backend biar cocok (PUT dengan FormData), tinggal bilang aja ya.

Mau sekalian ku bantuin styling atau pop-up konfirmasi delete juga?



1. Menu

"use client"
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { PlusIcon } from "lucide-react";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";

import { useEffect, useState } from "react";

interface Menuitem {
  id_menu: number;
  nama_menu: string;
  harga: number;
  menu_image: string;
  id_kategori:number;
}

const Features05Page = () => {
  const [menus, setMenu] = useState<Menuitem[]>([]);
  const [namaMenu, setNamaMenu] = useState("");
  const [harga, setHarga] = useState("");
  const [imageFile, setImageFile] = useState<File | null>(null);
  const [kategori,setKategori]=useState(1)


  const handleSubmit = async () => {
    const token = localStorage.getItem("adminToken");
    const formData = new FormData();
    formData.append("nama_menu", namaMenu);
    formData.append("harga", harga);
    formData.append("id_kategori", kategori.toString()); // pastikan string

    if (imageFile) {
      formData.append("menu_image", imageFile);
    }

    try {
      const response = await fetch("http://127.0.0.1:8000/api/menu/", {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
          // jangan tambahkan content-type, biarkan browser mengatur sendiri
        },
        body: formData,
      });

      if (!response.ok) {
        throw new Error("Gagal menambahkan menu");
      }

      const data = await response.json();
      setMenu((prev) => [...prev, data]); // update UI langsung
      setNamaMenu("");
      setHarga("");
      setKategori(1)
      setImageFile(null);
    } catch (error) {
      console.error("Error:", error);
    }
  };
  useEffect(() => {
    const token = localStorage.getItem("adminToken");
    fetch("http://127.0.0.1:8000/api/menu/", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
      .then((response) => response.json())
      .then((data: Menuitem[]) => setMenu(data))
      .catch((error) => console.log("error", error));
  }, []);

  return (
    <div className="max-w-screen-lg w-full py-10 px-6">
      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mb-4">
        Daftar Menu
      </h1>
      <Dialog>
        <DialogTrigger asChild>
          <Button
            variant="outline"
            size="icon"
            className="w-[140px] font-normal bg-gray-100"
          >
            <PlusIcon className="mr-2" /> Tambah Menu
          </Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Tambah Menu Baru</DialogTitle>
          </DialogHeader>

          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="nama" className="text-right">
                Nama
              </Label>
              <Input
                id="nama"
                value={namaMenu}
                onChange={(e) => setNamaMenu(e.target.value)}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="harga" className="text-right">
                Harga
              </Label>
              <Input
                id="harga"
                value={harga}
                onChange={(e) => setHarga(e.target.value)}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="kategori" className="text-right">
                kategori
              </Label>
              <Input
                id="kategori"
                value={kategori}
                onChange={(e) => setKategori(parseInt(e.target.value))}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="gambar" className="text-right">
                Gambar
              </Label>
              <Input
                id="gambar"
                type="file"
                accept="image/*"
                onChange={(e) => setImageFile(e.target.files?.[0] || null)}
                className="col-span-3"
              />
            </div>
          </div>

          <DialogFooter>
            <Button onClick={handleSubmit}>Simpan</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      <div className="mt-8 w-full mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-8">
        {menus.map((menu) => (
          <Card
            key={menu.id_menu}
            className="flex flex-col border rounded-xl overflow-hidden shadow-none"
          >
            <CardHeader>
              <h4 className="!mt-3 text-xl font-semibold tracking-tight">
                {menu.nama_menu}
              </h4>
              <p className="mt-1 text-muted-foreground text-[17px]">
                {menu.harga}
              </p>
            </CardHeader>
            <CardContent className="mt-auto px-0 pb-0">
              <div>
                <img
                  src={menu.menu_image}
                  alt="Error"
                  className="bg-muted h-40 ml-6 rounded-tl-xl"
                />
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default Features05Page;

Meja

import { useEffect, useState } from "react";
import { Button } from "../ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "../ui/dialog";
import { Input } from "../ui/input";
import { Label } from "@/components/ui/label";
import { PlusIcon } from "lucide-react";

const features = [
  {
    title: "Identify Opportunities",
    description: "Find untapped areas to explore effortlessly.",
  },
  {
    title: "Build Authority",
    description: "Craft content that resonates and inspires trust.",
  },
  {
    title: "Instant Insights",
    description: "Get actionable insights instantly at a glance.",
  },
];

interface MejaItem {
  id_meja: number;
  no_meja: number;
  kapasitas: number;
  image_meja: string;
}
const Features02Page = () => {
  const [mejas, setMeja] = useState<MejaItem[]>([]);
  const [no_meja, setNomeja] = useState("");
  const [id_meja, setIDMeja] = useState("");
  const [kapasitas, setKapasitas] = useState("");
  const [imageMeja, setImageMeja] = useState<File | null>(null);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem("adminToken");

    try {
      fetch("http://127.0.0.1:8000/api/meja/", {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
        .then((response) => response.json())
        .then((data: MejaItem[]) => setMeja(data))
        .catch((error) => console.log("error ", error));
    } catch (error) {
      console.log("error ", error);
    }
  }, []);

  const handleSubmit = async () => {
    const token = localStorage.getItem("adminToken");
    const newForm = new FormData();

    newForm.append("no_meja", no_meja);
    newForm.append("kapasitas", kapasitas);
    if (imageMeja) {
      newForm.append("image_meja", imageMeja);
    }

    try {
      const response = await fetch("http://127.0.0.1:8000/api/meja/", {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
        },
        body: newForm,
      });
      if (!response.ok) {
        throw new Error("Gagal menambahkan meja");
      }
      const data = await response.json();
      setMeja((prev) => [...prev, data]);
      setNomeja("");
      setKapasitas("");
      setImageMeja(null);
      setOpen(false);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div className="min-h-screen flex justify-center py-12">
      <div className="w-full">
        <h2 className="text-4xl sm:text-5xl font-bold tracking-tight mb-14 text-center">
          Daftar Meja
        </h2>
        <div className="ml-[315px]">
          <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
              <Button
                variant="outline"
                size="icon"
                className="w-[140px]  font-normal bg-gray-100"
              >
                <PlusIcon className="mr-2" /> Tambah Menu
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Tambah Menu Baru</DialogTitle>
              </DialogHeader>

              <div className="grid gap-4 py-4">
                <div className="grid grid-cols-4 items-center gap-4">
                  <Label htmlFor="no_meja" className="text-right">
                    No Meja
                  </Label>
                  <Input
                    id="no_meja"
                    value={no_meja}
                    onChange={(e) => setNomeja(e.target.value)}
                    className="col-span-3"
                  />
                </div>
                <div className="grid grid-cols-4 items-center gap-4">
                  <Label htmlFor="kapasitas" className="text-right">
                    Kapasitas
                  </Label>
                  <Input
                    id="kapasitas"
                    value={kapasitas}
                    onChange={(e) => setKapasitas(e.target.value)}
                    className="col-span-3"
                  />
                </div>

                <div className="grid grid-cols-4 items-center gap-4">
                  <Label htmlFor="gambar" className="text-right">
                    Gambar
                  </Label>
                  <Input
                    id="gambar"
                    type="file"
                    accept="image/*"
                    onChange={(e) => setImageMeja(e.target.files?.[0] || null)}
                    className="col-span-3"
                  />
                </div>
              </div>

              <DialogFooter>
                <Button onClick={handleSubmit}>Simpan</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>
        <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-12 max-w-md sm:max-w-screen-md lg:max-w-screen-lg w-full mx-auto px-6">
          {mejas.map((meja) => (
            <div key={meja.id_meja} className="flex flex-col text-start">
              <div>
                <img
                  src={meja.image_meja}
                  alt="Image Not Found"
                  className="mb-5 sm:mb-6 w-full aspect-[3/3] bg-muted rounded-xl"
                />
              </div>
              <span className="text-2xl font-semibold tracking-tight">
                Nomer Meja : {meja.no_meja}
              </span>
              <p className="mt-2 max-w-[25ch] text-muted-foreground text-[17px]">
                Kapasitas : {meja.kapasitas}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Features02Page;

Reservasi

// page
"use client"

import React from "react"
import { ReservationTable } from "./data-table"

export default function ReservationPage() {
  return (
    <div className="p-4">
      <h1 className="text-xl font-bold mb-4">Reservation List</h1>
      <ReservationTable />
    </div>
  )
}
// column.tsx


import { ColumnDef } from "@tanstack/react-table"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { ArrowUpDown, Edit, Trash2 } from "lucide-react"
import { Reservation } from "./data-table"

export function getReservationColumns(
  handleUpdateClick: (reservation: Reservation) => void,
  handleDeleteClick: (reservation: Reservation) => void
): ColumnDef<Reservation>[] {
  return [
    {
      id: "select",
      header: ({ table }) => (
        <Checkbox
          checked={
            table.getIsAllPageRowsSelected() ||
            (table.getIsSomePageRowsSelected() && "indeterminate")
          }
          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label="Select all"
        />    
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => row.toggleSelected(!!value)}
          aria-label="Select row"
        />
      ),
      enableSorting: false,
      enableHiding: false,
    },
    {
      header: "ID",
      cell: ({ row }) => <div>{row.index + 1}</div>,
    },
    {
      accessorKey: "nama_customer",
      header: ({ column }) => (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Customer Name
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      ),
      cell: ({ row }) => <div>{row.getValue("nama_customer")}</div>,
    },
    {
      accessorKey: "tanggal_reservasi",
      header: ({ column }) => (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Date
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      ),
      cell: ({ row }) => {
        const date = new Date(row.getValue("tanggal_reservasi"))
        return <div>{date.toLocaleDateString("en-GB")}</div>
      },
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row }) => {
        const status = row.getValue("status") as string
        const statusClass = {
          booked: "text-blue-600",
          confirmed: "text-green-600",
          pending: "text-amber-600",
          cancelled: "text-red-600",
        }[status.toLowerCase()] || ""
        return <div className={`capitalize font-medium ${statusClass}`}>{status}</div>
      },
    },
    {
      accessorKey: "id_meja",
      header: "Table No.",
      cell: ({ row }) => <div>Table {row.getValue("id_meja")}</div>,
    },
    {
      id: "actions",
      enableHiding: false,
      header: "Actions",
      cell: ({ row }) => {
        const reservation = row.original
        return (
          <div className="flex space-x-2">
            <Button
              variant="outline"
              size="sm"
              className="h-8 w-8 p-0"
              onClick={() => handleUpdateClick(reservation)}
            >
              <Edit className="h-4 w-4" />
            </Button>
            <Button
              variant="outline"
              size="sm"
              className="h-8 w-8 p-0 text-red-500 hover:text-red-600 hover:bg-red-50"
              onClick={() => handleDeleteClick(reservation)}
            >
              <Trash2 className="h-4 w-4" />
            </Button>
          </div>
        )
      },
    },
  ]
}

// data table

"use client";

import React, { use, useState } from "react";
import {
  ColumnFiltersState,
  SortingState,
  VisibilityState,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { Input } from "@/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { getReservationColumns } from "./column";
import { Button } from "@/components/ui/button";
import { PlusIcon } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { DialogFooter, DialogHeader } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { log } from "console";
import { Select, SelectContent, SelectItem } from "@/components/ui/select";
import { SelectTrigger, SelectValue } from "@radix-ui/react-select";

export type Reservation = {
  id_reservasi: number;
  nama_customer: string;
  tanggal_reservasi: string;
  status: string;
  id_meja: number;
  id_admin: number;
};

export function ReservationTable() {
  const [data, setData] = React.useState<Reservation[]>([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);
  const [sorting, setSorting] = React.useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    []
  );
  const [columnVisibility, setColumnVisibility] =
    React.useState<VisibilityState>({});
  const [rowSelection, setRowSelection] = React.useState({});
  const [id_admin, setIdAdmin] = useState("");
  const [nama_customer, setNama] = useState("");
  const [tanggal_reservasi, setTanggal] = useState("");
  const [status, setStatus] = useState("");
  const [id_meja, setMeja] = useState("");

  const fetchReservations = async () => {
    try {
      setLoading(true);
      const token = localStorage.getItem("adminToken");

      const response = await fetch("http://localhost:8000/api/reservasi/", {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
      });
      if (!response.ok) throw new Error("Failed to fetch reservation data");
      const result = await response.json();
      setData(Array.isArray(result) ? result : [result]);
    } catch (err) {
      setError("Failed to load reservations. Please try again later.");
    } finally {
      setLoading(false);
    }
  };

  React.useEffect(() => {
    fetchReservations();
  }, []);

  const handleSubmit = async () => {
    const formData = new FormData();
    formData.append("id_admin", id_admin);
    formData.append("nama_customer", nama_customer);
    formData.append("tanggal_reservasi", tanggal_reservasi);
    formData.append("status", status);
    formData.append("id_meja", id_meja);
    const token = localStorage.getItem("adminToken");

    try {
      const response = await fetch("http://127.0.0.1:8000/api/reservasi/", {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
        },
        body: formData,
      });
      if (!response.ok) {
        throw new Error("Gagal menambahkan reservasi");
      }
      const data = await response.json();
      setData((prev) => [...prev, data]);
      setIdAdmin("");
      setNama("");
      setStatus("");
      setTanggal("");
      setMeja("");
    } catch (err) {
      console.log("Error ", err);
    }
  };

  const columns = getReservationColumns(
    (r) => console.log("Update", r),
    (r) => console.log("Delete", r)
  );

  const table = useReactTable({
    data,
    columns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
    },
  });

  if (loading)
    return (
      <div className="flex justify-center items-center h-48">
        Loading reservation data...
      </div>
    );
  if (error)
    return (
      <div className="text-red-500 flex justify-center items-center h-48">
        {error}
      </div>
    );

  return (
    <div className="w-full">
      <div className="flex items-center py-4">
        <Input
          placeholder="Filter by customer name..."
          value={
            (table.getColumn("nama_customer")?.getFilterValue() as string) ?? ""
          }
          onChange={(e) =>
            table.getColumn("nama_customer")?.setFilterValue(e.target.value)
          }
          className="max-w-sm"
        />
        <Dialog>
          <DialogTrigger asChild>
            <Button
              variant="outline"
              size="icon"
              className="w-[160px] ml-2 font-normal bg-gray-100"
            >
              <PlusIcon className="mr-2" /> Tambah Reservasi
            </Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Tambahkan Reservasi</DialogTitle>
            </DialogHeader>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="id_admin" className="text-right">
                Id Admin
              </Label>
              <Input
                id="id_admin"
                value={id_admin}
                onChange={(e) => setIdAdmin(e.target.value)}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="meja" className="text-right">
                Id Meja
              </Label>
              <Input
                id="meja"
                value={id_meja}
                onChange={(e) => setMeja(e.target.value)}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="nama" className="text-right">
                Nama
              </Label>
              <Input
                id="nama"
                value={nama_customer}
                onChange={(e) => setNama(e.target.value)}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="status" className="text-right">
                Status
              </Label>
              <Select value={status} onValueChange={setStatus}>
                <SelectTrigger
                  id="status"
                  className="col-span-3 border border-input bg-background rounded-md px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
                > 
                  <SelectValue placeholder="Pilih status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Pending">Pending</SelectItem>
                  <SelectItem value="Booked">Booked</SelectItem>
                  <SelectItem value="Success">Success</SelectItem>
                  <SelectItem value="Cancelled">Cancelled</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="tanggal" className="text-right">
                Tanggal
              </Label>
              <Input
                id="tanggal_reservasi"
                value={tanggal_reservasi}
                onChange={(e) => setTanggal(e.target.value)}
                className="col-span-3"
                type="date"
              />
            </div>

            <DialogFooter>
              <Button onClick={handleSubmit}>Simpan</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <TableHead key={header.id}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                  </TableHead>
                ))}
              </TableRow>
            ))}
          </TableHeader>

          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={columns.length}
                  className="h-24 text-center"
                >
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

Report

'use client'

import ProductCard from "@/components/reportcard"
import { DataTableDemo } from "./table"

export default function Report(){
    return(
        <div>
            <DataTableDemo/>
            <div>
            <ProductCard/>

            </div>
        </div>
    )
}

// table.tsx
"use client"

import React, { useEffect, useState } from "react"
import {
  ColumnDef,
  ColumnFiltersState,
  SortingState,
  VisibilityState,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table"
import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

// 1. Tipe data
export type Payment = {
  id: string
  nama_customer: string
  grand_total: number
  status_pembayaran: "Pending" | "Processing" | "Success" | "Failed"
}

// 2. Kolom tetap sama
export const columns: ColumnDef<Payment>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "status_pembayaran",
    header: "Status",
    cell: ({ row }) => (
      <div className="capitalize">{row.getValue("status_pembayaran")}</div>
    ),
  },
  {
    accessorKey: "nama_customer",
    header: ({ column }) => (
      <Button
        variant="ghost"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Nama Customer
        <ArrowUpDown className="ml-2 h-4 w-4" />
      </Button>
    ),
    cell: ({ row }) => <div className="lowercase">{row.getValue("nama_customer")}</div>,
  },
  {
    accessorKey: "grand_total",
    header: () => <div className="text-right">Amount</div>,
    cell: ({ row }) => {
      const amount = parseFloat(row.getValue("grand_total"))

      return <div className="text-right font-medium">{amount}</div>
    },
  },
  {
    id: "actions",
    enableHiding: false,
    cell: ({ row }) => {
      const payment = row.original
      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0">
              <span className="sr-only">Open menu</span>
              <MoreHorizontal />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>
            <DropdownMenuItem
              onClick={() => navigator.clipboard.writeText(payment.id)}
            >
              Copy payment ID
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>View customer</DropdownMenuItem>
            <DropdownMenuItem>View payment details</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
  },
]

// 3. Komponen utama
export function DataTableDemo() {
  const [data, setData] = useState<Payment[]>([])
  const [loading, setLoading] = useState(true)

  const [sorting, setSorting] = useState<SortingState>([])
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
  const [rowSelection, setRowSelection] = useState({})

  // 4. Fetch API saat mount
  useEffect(() => {
    const fetchData = async () => {
        const token = localStorage.getItem("adminToken")
      try {
        const res = await fetch("http://127.0.0.1:8000/api/report/",{
            headers:{
                Authorization : `Bearer ${token}`
            }
        })
        const json = await res.json()
        setData(json)
      } catch (error) {
        console.error("Failed to fetch data", error)
      } finally {
        setLoading(false)
      }
    }

    fetchData()
  }, [])

  const table = useReactTable({
    data,
    columns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
    },
  })

  return (
    <div className="w-full">
      <div className="flex items-center py-4">
        <Input
          placeholder="Filter emails..."
          value={(table.getColumn("nama_customer")?.getFilterValue() as string) ?? ""}
          onChange={(event) =>
            table.getColumn("nama_customer")?.setFilterValue(event.target.value)
          }
          className="max-w-sm"
        />
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="ml-auto">
              Columns <ChevronDown />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            {table
              .getAllColumns()
              .filter((column) => column.getCanHide())
              .map((column) => (
                <DropdownMenuCheckboxItem
                  key={column.id}
                  className="capitalize"
                  checked={column.getIsVisible()}
                  onCheckedChange={(value) =>
                    column.toggleVisibility(!!value)
                  }
                >
                  {column.id}
                </DropdownMenuCheckboxItem>
              ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      <div className="rounded-md border">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <TableHead key={header.id}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                  </TableHead>
                ))}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {loading ? (
              <TableRow>
                <TableCell colSpan={columns.length} className="h-24 text-center">
                  Loading...
                </TableCell>
              </TableRow>
            ) : table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={columns.length}
                  className="h-24 text-center"
                >
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>

      <div className="flex items-center justify-end space-x-2 py-4">
        <div className="flex-1 text-sm text-muted-foreground">
          {table.getFilteredSelectedRowModel().rows.length} of{" "}
          {table.getFilteredRowModel().rows.length} row(s) selected.
        </div>
        <div className="space-x-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
          >
            Previous
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
          >
            Next
          </Button>
        </div>
      </div>
    </div>
  )
}

NextJS with ShadCN build Web for Consume API?

Vytroo — Mon, 07 Apr 2025 14:13:37 +0000

install nextjs

npx create-next-app@latest

# install shadcn and pnpm

npm i -g pnpm

pnpm dlx shadcn@latest init

install sidebar default layout for dashboard

pnpm dlx shadcn@latest add sidebar

return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset className="m-5">
        <Separator
          orientation="vertical"
          className="mr-2 data-[orientation=vertical]:h-4"
        />
        <SidebarTrigger className="-ml-1" />
        <Separator
          orientation="vertical"
          className="mr-2 data-[orientation=vertical]:h-4"
        />
        {children}
      </SidebarInset>
    </SidebarProvider>
  );

build the landing page

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ArrowUpRight, CirclePlay } from "lucide-react";
import React from "react";
import Login02Page from "./login";

const Hero04 = () => {
  return (
    <div className="min-h-screen flex items-center justify-center overflow-hidden">
      <div className="max-w-screen-xl w-full mx-auto grid lg:grid-cols-2 gap-12 px-6 py-12 lg:py-0">
        <div className="my-auto">
          <Badge className="bg-gradient-to-br via-70% from-primary via-muted/30 to-primary rounded-full py-1 border-none">
            Just released v1.0.0
          </Badge>
          <h1 className="mt-6 max-w-[17ch] text-4xl md:text-5xl lg:text-[2.75rem] xl:text-5xl font-bold !leading-[1.2] tracking-tight">
            Customized Shadcn UI Blocks & Components
          </h1>
          <p className="mt-6 max-w-[60ch] text-lg">
            Explore a collection of Shadcn UI blocks and components, ready to
            preview and copy. Streamline your development workflow with
            easy-to-implement examples.
          </p>
          <div className="mt-12 flex items-center gap-4">
            <Button size="lg" className="rounded-full text-base">
              Get Started <ArrowUpRight className="!h-5 !w-5" />
            </Button>
            <Button
              variant="outline"
              size="lg"
              className="rounded-full text-base shadow-none"
            >
              <CirclePlay className="!h-5 !w-5" /> Watch Demo
            </Button>
          </div>
        </div>
        <div className="w-full aspect-video lg:aspect-auto lg:w-[1000px] lg:h-[calc(100vh-4rem)] bg-accent rounded-xl" >
          <Login02Page/>
        </div>
      </div>
    </div>
  );
};

export default Hero04;

"use client";

import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { zodResolver } from "@hookform/resolvers/zod";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

const formSchema = z.object({
  username: z.string(),
  password: z.string().min(5, "Password must be at least 8 characters long"),
});

const Login02Page = () => {
  const [errorMessage,setErrorMessage]=useState("")
  const router = useRouter()
  const form = useForm<z.infer<typeof formSchema>>({
    defaultValues: {
      username: "",
      password: "",
    },
    resolver: zodResolver(formSchema),
  });

  const onSubmit = async (data: z.infer<typeof formSchema>) => {
    setErrorMessage("")
    try{
      const response = await fetch('http://127.0.0.1:8000/api/login/',{
        method:'POST',
        headers:{'Content-Type':'application/json'},
        credentials: "include",
        body:JSON.stringify(data)
      })
      const result = await response.json()
      if(!response.ok){
        throw new Error(result.message || "Login Failed")
      }
      localStorage.setItem("adminToken",result.access)
      router.push("/menu")
      console.log(result.access );

    }
    catch(err:any){
      setErrorMessage(err.message)
    }


  };

  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="max-w-sm w-full flex flex-col items-center border rounded-lg p-6 shadow-sm">
        <p className="mt-4 mb-10 text-xl font-bold tracking-tight">
          Log in to Shadcn UI Blocks
        </p>



        <Form {...form}>
          <form
            className="w-full space-y-4"
            onSubmit={form.handleSubmit(onSubmit)}
          >
            <FormField
              control={form.control}
              name="username"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Username</FormLabel>
                  <FormControl>
                    <Input
                      type="text"
                      placeholder="Username"
                      className="w-full"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Password</FormLabel>
                  <FormControl>
                    <Input
                      type="password"
                      placeholder="Password"
                      className="w-full"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="mt-4 w-full">
              Login
             </Button>
          </form>
        </Form>

        <div className="mt-5 space-y-5">
          <Link
            href="#"
            className="text-sm block underline text-muted-foreground text-center"
          >
            Forgot your password?
          </Link>
          <p className="text-sm text-center">
            Don&apos;t have an account?
            <Link href="#" className="ml-1 underline text-muted-foreground">
              Create account
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
};



export default Login02Page;

Validasi Error & datepicker

Vytroo — Mon, 07 Apr 2025 14:02:55 +0000

validation

User = get_user_model()

class LoginSerializer(serializers.Serializer):
    email = serializers.EmailField()
    password = serializers.CharField(write_only=True)

    def validate(self, data):
        email = data.get('email')
        password = data.get('password')

        try:
            user = User.objects.get(email=email)
        except User.DoesNotExist:
            raise serializers.ValidationError("Email tidak ditemukan")

        if not user.check_password(password):
            raise serializers.ValidationError("Password salah")

        refresh = RefreshToken.for_user(user)

        return {
            'refresh': str(refresh),
            'access': str(refresh.access_token),
            'user': UserSerializer(user).data
        }



register=
@api_view(['POST'])
def register(request):
    try:
        username = request.data.get('username')
        password = request.data.get('password')
        email = request.data.get('email')
        no_hp = request.data.get('no_hp')
        alamat = request.data.get('alamat')

        if User.objects.filter(email=email).exists():
            return Response({'error': 'Email sudah terdaftar'}, status=400)

        if User.objects.filter(username=username).exists():
            return Response({'error': 'Username sudah terdaftar'}, status=400)

        user = User.objects.create_user(
            username=username,
            email=email,
            no_hp=no_hp,
            alamat=alamat
        )
        user.set_password(password)
        user.save()

        refresh = RefreshToken.for_user(user)
        return Response({
            'refresh': str(refresh),
            'access': str(refresh.access_token),
            'user': {
                'id': user.id,
                'username': user.username,
                'email': user.email,
                'status': user.status
            }
        })

    except Exception as e:
        return Response({'error': str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)

"use client";

import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { zodResolver } from "@hookform/resolvers/zod";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { toast } from "sonner"; // Import Sonner

const formSchema = z.object({
  username: z.string(),
  password: z.string().min(5, "Password must be at least 5 characters long"),
});

const Login02Page = () => {
  const [errorMessage, setErrorMessage] = useState("");
  const router = useRouter();
  const form = useForm<z.infer<typeof formSchema>>({
    defaultValues: {
      username: "",
      password: "",
    },
    resolver: zodResolver(formSchema),
  });

  const onSubmit = async (data: z.infer<typeof formSchema>) => {
    setErrorMessage("");
    try {
      const response = await fetch("http://127.0.0.1:8000/api/login/", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });
      const result = await response.json();

      if (response.ok) {
        localStorage.setItem("adminToken", result.access);
        toast.success("Login successful!"); // Success toast
        router.push("/menu");
      } else {
        // Handle different error cases
        if (result.detail) {
          toast.error(result.detail); // Error toast from API
        } else {
          toast.error("Failed to login. Please check your credentials."); // Generic error
        }
      }
    } catch (err: any) {
      toast.error(err.message || "An unexpected error occurred"); // Network error
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="max-w-sm w-full flex flex-col items-center border rounded-lg p-6 shadow-sm">
        <p className="mt-4 mb-10 text-xl font-bold tracking-tight">
          Log in to Restoran SMK
        </p>

        <Form {...form}>
          <form
            className="w-full space-y-4"
            onSubmit={form.handleSubmit(onSubmit)}
          >
            <FormField
              control={form.control}
              name="username"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Username</FormLabel>
                  <FormControl>
                    <Input
                      type="text"
                      placeholder="Username"
                      className="w-full"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Password</FormLabel>
                  <FormControl>
                    <Input
                      type="password"
                      placeholder="Password"
                      className="w-full"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="mt-4 w-full">
              Login
            </Button>
          </form>
        </Form>

        <div className="mt-5 space-y-5">
          <Link
            href="#"
            className="text-sm block underline text-muted-foreground text-center"
          >
            Forgot your password?
          </Link>
          <p className="text-sm text-center">
            Don&apos;t have an account?
            <Link href="#" className="ml-1 underline text-muted-foreground">
              Create account
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
};

export default Login02Page;

layout

import { Toaster } from "sonner";

// Di dalam komponen Layout Anda:
return (
  <html>
    <body>
      {/* ... konten lainnya ... */}
      <Toaster richColors position="top-center" />
    </body>
  </html>
);

# views.py
from django.db.models import Sum, Count, Case, When, Value, CharField
from rest_framework.decorators import api_view
from rest_framework.response import Response
from django.utils.dateparse import parse_date
from .models import DetailTransaksi, Transaksi
from datetime import datetime

@api_view(['GET'])
def top_5_menu_terlaris(request):
    try:
        # Tambahkan filter tanggal jika diperlukan
        start_date = request.GET.get('start_date')
        end_date = request.GET.get('end_date')

        queryset = DetailTransaksi.objects.all()

        if start_date and end_date:
            start_date = datetime.strptime(start_date, '%Y-%m-%d').date()
            end_date = datetime.strptime(end_date, '%Y-%m-%d').date()
            queryset = queryset.filter(
                transaksi__created_at__date__range=[start_date, end_date]
            )

        queryset = (
            queryset
            .values('menu__nama_menu')
            .annotate(total_dipesan=Sum('qty'))
            .order_by('-total_dipesan')[:5]
        )

        return Response({
            'success': True,
            'data': queryset,
            'message': 'Data top 5 menu berhasil diambil'
        })
    except Exception as e:
        return Response({
            'success': False,
            'error': str(e)
        }, status=400)

@api_view(['GET'])
def total_pendapatan(request):
    try:
        start_date = request.GET.get('start_date', None)
        end_date = request.GET.get('end_date', None)

        if not start_date or not end_date:
            return Response({
                'success': False,
                'error': 'Parameter start_date dan end_date diperlukan'
            }, status=400)

        start_date = datetime.strptime(start_date, '%Y-%m-%d').date()
        end_date = datetime.strptime(end_date, '%Y-%m-%d').date()

        # Hitung total pendapatan dari transaksi lunas
        total_lunas = (
            Transaksi.objects
            .filter(kekurangan__lte=0, created_at__date__range=[start_date, end_date])
            .aggregate(total_pendapatan=Sum('total_bayar'))['total_pendapatan'] or 0
        )

        # Hitung laba dari transaksi yang kurang (jika ada)
        laba_transaksi_kurang = (
            Transaksi.objects
            .filter(kekurangan__gt=0, created_at__date__range=[start_date, end_date])
            .aggregate(total_laba=Sum('total_bayar') - Sum('kekurangan'))['total_laba'] or 0
        )

        total_pendapatan = total_lunas + laba_transaksi_kurang

        return Response({
            'success': True,
            'data': {
                'total_pendapatan': total_pendapatan,
                'detail': {
                    'pendapatan_lunas': total_lunas,
                    'laba_transaksi_kurang': laba_transaksi_kurang
                }
            }
        })
    except Exception as e:
        return Response({
            'success': False,
            'error': str(e)
        }, status=400)

@api_view(['GET'])
def ringkasan_status_pembayaran(request):
    try:
        start_date = request.GET.get('start_date', None)
        end_date = request.GET.get('end_date', None)

        if not start_date or not end_date:
            return Response({
                'success': False,
                'error': 'Parameter start_date dan end_date diperlukan'
            }, status=400)

        start_date = datetime.strptime(start_date, '%Y-%m-%d').date()
        end_date = datetime.strptime(end_date, '%Y-%m-%d').date()

        queryset = (
            Transaksi.objects
            .filter(created_at__date__range=[start_date, end_date])
            .annotate(
                payment_status=Case(
                    When(status_pembayaran__in=['settlement', 'paid'], then=Value('Paid')),
                    When(status_pembayaran__in=['pending', 'unpaid'], then=Value('Unpaid')),
                    default=Value('Other'),
                    output_field=CharField(),
                )
            )
            .values('payment_status')
            .annotate(jumlah_transaksi=Count('id'))
            .order_by('payment_status')
        )

        return Response({
            'success': True,
            'data': queryset,
            'periode': f"{start_date} hingga {end_date}"
        })
    except Exception as e:
        return Response({
            'success': False,
            'error': str(e)
        }, status=400)

reporting

npm install @tanstack/react-table date-fns

/app/reports/page.tsx

/app/api/reports/route.ts

typescript
Copy
import { NextResponse } from 'next/server';

const API_BASE_URL = 'http://localhost:8000'; // Sesuaikan dengan URL Django Anda

export async function GET() {
  const startDate = '2025-04-10';
  const endDate = '2025-04-30';

  try {
    // Fetch data paralel dari semua endpoint
    const [topMenuRes, pendapatanRes, statusRes] = await Promise.all([
      fetch(`${API_BASE_URL}/report/top-menu/?start_date=${startDate}&end_date=${endDate}`),
      fetch(`${API_BASE_URL}/report/pendapatan/?start_date=${startDate}&end_date=${endDate}`),
      fetch(`${API_BASE_URL}/report/status-pembayaran/?start_date=${startDate}&end_date=${endDate}`)
    ]);

    if (!topMenuRes.ok || !pendapatanRes.ok || !statusRes.ok) {
      throw new Error('Gagal mengambil data dari server');
    }

    const [topMenu, pendapatan, statusPembayaran] = await Promise.all([
      topMenuRes.json(),
      pendapatanRes.json(),
      statusRes.json()
    ]);

    return NextResponse.json({
      success: true,
      data: {
        topMenu: topMenu.data,
        pendapatan: pendapatan.data,
        statusPembayaran: statusPembayaran.data
      },
      periode: {
        startDate,
        endDate
      }
    });
  } catch (error) {
    return NextResponse.json({
      success: false,
      error: error instanceof Error ? error.message : 'Terjadi kesalahan'
    }, { status: 500 });
  }
}
2. Buat Komponen Report Page
/app/reports/page.tsx

tsx
Copy
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { format } from "date-fns";

async function getReportData() {
  const res = await fetch('http://localhost:3000/api/reports', {
    next: { revalidate: 3600 } // Revalidate setiap 1 jam
  });

  if (!res.ok) {
    throw new Error('Gagal mengambil data laporan');
  }

  return res.json();
}

export default async function ReportsPage() {
  const reportData = await getReportData();

  if (!reportData.success) {
    return <div>Error: {reportData.error}</div>;
  }

  const { topMenu, pendapatan, statusPembayaran, periode } = reportData.data;
  const startDate = new Date(periode.startDate);
  const endDate = new Date(periode.endDate);

  return (
    <div className="container mx-auto py-8">
      <h1 className="text-2xl font-bold mb-6">Laporan Periode: {format(startDate, 'dd MMM yyyy')} - {format(endDate, 'dd MMM yyyy')}</h1>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <Card>
          <CardHeader>
            <CardTitle>Total Pendapatan</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">
              {new Intl.NumberFormat('id-ID', { 
                style: 'currency', 
                currency: 'IDR',
                minimumFractionDigits: 0
              }).format(pendapatan.total_pendapatan)}
            </div>
            <div className="text-sm text-muted-foreground mt-2">
              <p>Lunas: {new Intl.NumberFormat('id-ID', { 
                style: 'currency', 
                currency: 'IDR',
                minimumFractionDigits: 0
              }).format(pendapatan.detail.pendapatan_lunas)}</p>
              <p>Laba Transaksi Kurang: {new Intl.NumberFormat('id-ID', { 
                style: 'currency', 
                currency: 'IDR',
                minimumFractionDigits: 0
              }).format(pendapatan.detail.laba_transaksi_kurang)}</p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Status Pembayaran</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {statusPembayaran.map((item: any) => (
                <div key={item.payment_status} className="flex justify-between">
                  <span>{item.payment_status}:</span>
                  <span>{item.jumlah_transaksi} transaksi</span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>5 Menu Terlaris</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>No</TableHead>
                <TableHead>Nama Menu</TableHead>
                <TableHead className="text-right">Total Dipesan</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {topMenu.map((menu: any, index: number) => (
                <TableRow key={menu.nama_menu || index}>
                  <TableCell>{index + 1}</TableCell>
                  <TableCell>{menu.nama_menu || 'Menu Tidak Diketahui'}</TableCell>
                  <TableCell className="text-right">{menu.total_dipesan || 0}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}
3. Tambahkan Loading State (Optional)
Buat file /app/reports/loading.tsx untuk menampilkan skeleton loader:

tsx
Copy
import { Skeleton } from "@/components/ui/skeleton";

export default function Loading() {
  return (
    <div className="container mx-auto py-8 space-y-6">
      <Skeleton className="h-8 w-64" />

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Skeleton className="h-40" />
        <Skeleton className="h-40" />
      </div>

      <Skeleton className="h-96" />
    </div>
  );
}
4. Error Handling (Optional)
Buat file /app/reports/error.tsx untuk menangani error:

tsx
Copy
'use client';

import { useEffect } from "react";
import { Button } from "@/components/ui/button";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div className="container mx-auto py-8 text-center">
      <h2 className="text-xl font-bold mb-4">Gagal memuat laporan</h2>
      <p className="text-destructive mb-4">{error.message}</p>
      <Button onClick={() => reset()}>Coba Lagi</Button>
    </div>
  );
}

jalan terakhir

'use client';

import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { format } from "date-fns";
import { useEffect, useState } from "react";

export default function TopMenuPage() {
  const [data, setData] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const startDate = '2025-04-10';
  const endDate = '2025-04-30';

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(
          `http://localhost:8000/report/top-menu/?start_date=${startDate}&end_date=${endDate}`
        );

        if (!response.ok) {
          throw new Error('Failed to fetch top menu data');
        }

        const result = await response.json();

        if (result.success) {
          setData(result.data || []);
        } else {
          throw new Error(result.error || 'Unknown error occurred');
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : 'An unknown error occurred');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return (
      <div className="container mx-auto py-8">
        <Card>
          <CardHeader>
            <CardTitle>5 Menu Terlaris</CardTitle>
            <p className="text-sm text-muted-foreground">
              Periode: {format(new Date(startDate), 'dd MMM yyyy')} - {format(new Date(endDate), 'dd MMM yyyy')}
            </p>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {[...Array(5)].map((_, i) => (
                <div key={i} className="h-12 bg-muted/50 rounded animate-pulse"></div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  if (error) {
    return (
      <div className="container mx-auto py-8 text-center">
        <Card className="bg-destructive/10 border-destructive">
          <CardHeader>
            <CardTitle className="text-destructive">Error</CardTitle>
          </CardHeader>
          <CardContent>
            <p>{error}</p>
            <button 
              onClick={() => window.location.reload()}
              className="mt-4 px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90"
            >
              Coba Lagi
            </button>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="container mx-auto py-8">
      <Card>
        <CardHeader>
          <CardTitle>5 Menu Terlaris</CardTitle>
          <p className="text-sm text-muted-foreground">
            Periode: {format(new Date(startDate), 'dd MMM yyyy')} - {format(new Date(endDate), 'dd MMM yyyy')}
          </p>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Peringkat</TableHead>
                <TableHead>Menu</TableHead>
                <TableHead className="text-right">Total Dipesan</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {data.length > 0 ? (
                data.map((item, index) => (
                  <TableRow key={item.nama_menu || index}>
                    <TableCell>#{index + 1}</TableCell>
                    <TableCell className="font-medium">{item.nama_menu || 'Menu Tidak Diketahui'}</TableCell>
                    <TableCell className="text-right">{item.total_dipesan || 0}</TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={3} className="text-center py-4">
                    Tidak ada data menu
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}

top menu

"use client";

import { useEffect, useState } from "react";

interface MenuTerlaris {
  menu_id__nama_menu: string;
  total_dipesan: number;
}

export default function TopMenuTerlaris() {
  const [data, setData] = useState<MenuTerlaris[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("http://localhost:8000/api/top-5-menu-terlaris/") // Ganti URL jika beda
      .then((res) => res.json())
      .then((json) => {
        if (json.success) {
          setData(json.data);
        }
        setLoading(false);
      })
      .catch((err) => {
        console.error("Gagal ambil data:", err);
        setLoading(false);
      });
  }, []);

  return (
    <div className="p-6 bg-white rounded-xl shadow-md w-full max-w-xl mx-auto mt-8">
      <h2 className="text-2xl font-bold mb-4 text-center">Top 5 Menu Terlaris</h2>
      {loading ? (
        <p className="text-center">Memuat...</p>
      ) : data.length === 0 ? (
        <p className="text-center">Belum ada data.</p>
      ) : (
        <ul className="space-y-3">
          {data.map((item, index) => (
            <li
              key={index}
              className="flex justify-between bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition"
            >
              <span className="font-medium">{item.menu_id__nama_menu}</span>
              <span className="text-sm text-gray-600">{item.total_dipesan}x</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}





from rest_framework.decorators import api_view
from rest_framework.response import Response
from django.db.models import Sum

from .models import TransaksiDetail  # atau sesuaikan path import kalau beda

@api_view(['GET'])
def top_5_menu_terlaris(request):
    queryset = (
        TransaksiDetail.objects
        .values('menu_id__nama_menu')  # gunakan double underscore untuk FK
        .annotate(total_dipesan=Sum('qty'))
        .order_by('-total_dipesan')[:5]
    )

    return Response({
        'success': True,
        'data': queryset,
        'message': 'Data top 5 menu berhasil diambil'
    })