diff --git a/src/components/Coupon.js b/src/components/Coupon.js index 3268a2f..46e5a3e 100644 --- a/src/components/Coupon.js +++ b/src/components/Coupon.js @@ -41,7 +41,7 @@ const Coupon = ({ code, value, period, type, expiration }) => { return (
- {daysLeft < 1 && ( + {(expiration == null && code != null) || (expiration != null && code != null && daysLeft < 1) && (

Kupon berakhir

diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js index f668894..896536d 100644 --- a/src/pages/Dashboard.js +++ b/src/pages/Dashboard.js @@ -13,6 +13,7 @@ import CircularDiagram from "./CircularDiagram"; import API_BASE_URL from '../config'; import DailyCharts from '../components/DailyCharts'; import Coupon from '../components/Coupon'; +import Reports from './Reports' const LinktreePage = ({ user, setModal }) => { const navigate = useNavigate(); @@ -235,633 +236,635 @@ const LinktreePage = ({ user, setModal }) => { return ( <> {user && user.roleId < 2 ? ( - <> -
+ // <> + //
-
-
+ //
+ //
-
setIsModalOpen(true)} - isLogout={handleLogout} - user={user} - showProfile={true} - setModal={setModal} - HeaderMargin='0px' - /> -
-
-
- {user.roleId == 0 ? ( - selectedItemId == 0 || selectedItemId == -1 ? ( -
-
- + //
setIsModalOpen(true)} + // isLogout={handleLogout} + // user={user} + // showProfile={true} + // setModal={setModal} + // HeaderMargin='0px' + // /> + //
+ //
+ //
+ // {user.roleId == 0 ? ( + // selectedItemId == 0 || selectedItemId == -1 ? ( + //
+ //
+ // - - - - - - - - -

{items?.totalIncome}

-

pemasukan

-
-
- + // + // + // + // + // + // + // + // + //

{items?.totalIncome}

+ //

pemasukan

+ //
+ //
+ // - - - - - - - - -

Tagihan

-

{items?.totalIncome * 0.02}

-
-
- ) : ( -
-
+ // + // + // + // + // + // + // + // + //

Tagihan

+ //

{items?.totalIncome * 0.02}

+ //
+ //
+ // ) : ( + //
+ //
- + // - - - - - - - - -

{selectedItems?.totalIncome}

-

pemasukann

-
-
- + // + // + // + // + // + // + // + // + //

{selectedItems?.totalIncome}

+ //

pemasukann

+ //
+ //
+ // - - - - - - - - -

{selectedItems?.totalIncome * 0.02}

-

tagihan

-
-
- -

{selectedItems?.totalIncome * 0.02}

-

{filteredItems.name}

-
-
- ) - ) : ( - selectedItemId == 0 || selectedItemId == -1 ? - ( -
-
- + // + // + // + // + // + // + // + // + //

{selectedItems?.totalIncome * 0.02}

+ //

tagihan

+ //
+ //
+ // + //

{selectedItems?.totalIncome * 0.02}

+ //

{filteredItems.name}

+ //
+ //
+ // ) + // ) : ( + // selectedItemId == 0 || selectedItemId == -1 ? + // ( + //
+ //
+ // - - - - - - - - -

{formatIncome(items?.totalIncome)}

-

pemasukan

-
-
- + // + // + // + // + // + // + // + // + //

{formatIncome(items?.totalIncome)}

+ //

pemasukan

+ //
+ //
+ // - - - - - - - - -

{formatIncome(items?.totalOutcome)}

-

pengeluaran

-
-
- + // + // + // + // + // + // + // + // + //

{formatIncome(items?.totalOutcome)}

+ //

pengeluaran

+ //
+ //
+ // - - - - - - - - -

{formatIncome(items?.totalIncome * 0.02)}

-

tanggungan

-
-
- ) : ( -
-
+ // + // + // + // + // + // + // + // + //

{formatIncome(items?.totalIncome * 0.02)}

+ //

tanggungan

+ //
+ //
+ // ) : ( + //
+ //
- + // - - - - - - - - -

{formatIncome(selectedItems?.report?.totalIncome)}

-

pemasukan

-
-
- + // + // + // + // + // + // + // + // + //

{formatIncome(selectedItems?.report?.totalIncome)}

+ //

pemasukan

+ //
+ //
+ // - - - - - - - - -

{formatIncome(selectedItems?.report?.currentOutcome)}

-

pengeluaran

-
-
- -

 

-

{selectedItems?.name}

-
-
- ) - )} + // + // + // + // + // + // + // + // + //

{formatIncome(selectedItems?.report?.currentOutcome)}

+ //

pengeluaran

+ //
+ //
+ // + //

 

+ //

{selectedItems?.name}

+ //
+ //
+ // ) + // )} -
-
+ //
+ //
-
-
- + //
+ //
+ // -

terlaku

-
-
- -
-
- {segments && segments.map((item, index) => ( -
-
- ★ -
-
{item.percentage == 'Infinity' || isNaN(item.percentage) ? 0 : item.percentage}%   {item.value}
-
- ))} - {segments.length < 1 && - <> + //

terlaku

+ //
+ //
+ // + //
+ //
+ // {segments && segments.map((item, index) => ( + //
+ //
+ // ★ + //
+ //
{item.percentage == 'Infinity' || isNaN(item.percentage) ? 0 : item.percentage}%   {item.value}
+ //
+ // ))} + // {segments.length < 1 && + // <> - {Array.from({ length: 5 }).map((_, index) => ( -
-
- - -
-
- ))} + // {Array.from({ length: 5 }).map((_, index) => ( + //
+ //
+ // - + //
+ //
+ // ))} - - } -
+ // + // } + //
-
-

penambahan stok

- - {coupons && coupons.map((coupon) => { - return - })} - -
-
+ //
+ //

penambahan stok

+ // + // {coupons && coupons.map((coupon) => { + // return + // })} + // + //
+ //
-
-
-
- Semua {user.roleId < 1 ? 'penyewa' : 'kedai anda'} -
-
-
+ //
+ //
+ //
+ // Semua {user.roleId < 1 ? 'penyewa' : 'kedai anda'} + //
+ //
+ //
- {user.roleId < 1 && -
{ - setSelectedItemId(selectedItemId === -1 ? 0 : -1); - setModal('create_tenant'); - }} - > - Tambah penyewa -
- } - { - items?.items?.length > 0 ? ( - items.items.map((item) => { - const isTenantSelected = selectedItemId === (item.userId || item.cafeId); - const tenantBackgroundColor = isTenantSelected && !selectedSubItemId ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)'; - const hasSubItems = item?.subItems?.length > 0; + // {user.roleId < 1 && + //
{ + // setSelectedItemId(selectedItemId === -1 ? 0 : -1); + // setModal('create_tenant'); + // }} + // > + // Tambah penyewa + //
+ // } + // { + // items?.items?.length > 0 ? ( + // items.items.map((item) => { + // const isTenantSelected = selectedItemId === (item.userId || item.cafeId); + // const tenantBackgroundColor = isTenantSelected && !selectedSubItemId ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)'; + // const hasSubItems = item?.subItems?.length > 0; - return ( -
-
{ - setSelectedItemId(isTenantSelected && !selectedSubItemId ? 0 : (item.userId || item.cafeId)); - setSelectedSubItemId(0); // Reset subitem selection when changing tenant - }} - style={{ backgroundColor: tenantBackgroundColor }} - className={isTenantSelected ? styles.rectangleNLine : styles.rectangle} - > -

{item.username || item.name}  

-

- Rp{formatIncome(item.totalIncome || item.report?.currentTotals.income) || 0} -

-
+ // return ( + //
+ //
{ + // setSelectedItemId(isTenantSelected && !selectedSubItemId ? 0 : (item.userId || item.cafeId)); + // setSelectedSubItemId(0); // Reset subitem selection when changing tenant + // }} + // style={{ backgroundColor: tenantBackgroundColor }} + // className={isTenantSelected ? styles.rectangleNLine : styles.rectangle} + // > + //

{item.username || item.name}  

+ //

+ // Rp{formatIncome(item.totalIncome || item.report?.currentTotals.income) || 0} + //

+ //
- {/* Only show cafes if the tenant is selected */} - {selectedItemId === (item.userId || item.cafeId) && hasSubItems && item.subItems.map((subItem) => { - const isCafeSelected = selectedSubItemId == (subItem.cafeId || subItem.userId); - const cafeBackgroundColor = isCafeSelected ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)'; + // {/* Only show cafes if the tenant is selected */} + // {selectedItemId === (item.userId || item.cafeId) && hasSubItems && item.subItems.map((subItem) => { + // const isCafeSelected = selectedSubItemId == (subItem.cafeId || subItem.userId); + // const cafeBackgroundColor = isCafeSelected ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)'; - return ( -
{ - setSelectedSubItemId(isCafeSelected ? 0 : (subItem.cafeId || subItem.userId)); // Toggle subitem selection - setSelectedItemId(item.userId || item.cafeId); // Ensure tenant stays selected - }} - style={{ backgroundColor: cafeBackgroundColor }} - > - {subItem.name || subItem.username} - {/*  pendapatan {formatIncome(subItem.report?.totalIncome || 0)} */} -
- ); - })} - {selectedItemId == item.cafeId && -
{ setSelectedSubItemId(selectedSubItemId == -1 ? 0 : -1); setModal('create_clerk') }} - style={{ backgroundColor: selectedItemId == item.cafeId && selectedSubItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }} - > - tambah kasir -
- } -
- ); - }) - ) : ( -
No tenants available
- ) - } - {user.roleId > 0 && -
{ setSelectedItemId(selectedItemId == -1 ? 0 : -1); setModal('create_kedai') }} - > - Tambah kedai -
- } -
-
+ // return ( + //
{ + // setSelectedSubItemId(isCafeSelected ? 0 : (subItem.cafeId || subItem.userId)); // Toggle subitem selection + // setSelectedItemId(item.userId || item.cafeId); // Ensure tenant stays selected + // }} + // style={{ backgroundColor: cafeBackgroundColor }} + // > + // {subItem.name || subItem.username} + // {/*  pendapatan {formatIncome(subItem.report?.totalIncome || 0)} */} + //
+ // ); + // })} + // {selectedItemId == item.cafeId && + //
{ setSelectedSubItemId(selectedSubItemId == -1 ? 0 : -1); setModal('create_clerk') }} + // style={{ backgroundColor: selectedItemId == item.cafeId && selectedSubItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }} + // > + // tambah kasir + //
+ // } + //
+ // ); + // }) + // ) : ( + //
No tenants available
+ // ) + // } + // {user.roleId > 0 && + //
{ setSelectedItemId(selectedItemId == -1 ? 0 : -1); setModal('create_kedai') }} + // > + // Tambah kedai + //
+ // } + //
+ //
+ // + ) : (
diff --git a/src/pages/Reports.js b/src/pages/Reports.js index 5f7a218..e1dd2fd 100644 --- a/src/pages/Reports.js +++ b/src/pages/Reports.js @@ -103,7 +103,7 @@ const RoundedRectangle = ({ }; const App = ({ cafeId, - handleClose }) => { + handleClose, otherCafes }) => { const [analytics, setAnalytics] = useState({}); const [loading, setLoading] = useState(true); const [filter, setFilter] = useState("yesterday"); @@ -149,7 +149,7 @@ const App = ({ cafeId, "#A6D6F0", // Sky Blue "#BC4749", // Cranberry Red ]; - + const segments = filteredItems.map((item, index) => ({ percentage: item.percentage, @@ -180,6 +180,7 @@ const App = ({ cafeId, } function onToggle(selectedItem) { + setAnalytics({}); const filterMap = ["yesterday", "weekly", "monthly", "yearly"]; setFilter(filterMap[selectedItem]); } @@ -187,15 +188,100 @@ const App = ({ cafeId, const filterTexts = ["1", "7", "30", "365"]; const comparisonText = filterTexts[["yesterday", "weekly", "monthly", "yearly"].indexOf(filter)]; - // const formatDate = (isoDateString) => { - // const date = new Date(isoDateString); - // return date.toLocaleDateString("en-US", { - // year: "numeric", - // month: "long", - // day: "numeric", - // hour: "numeric", - // }); - // }; + + const [resetKey, setResetKey] = useState(0); // A key to force re-render + const [texts, setTexts] = useState(['buat kedai']); // initially show only first 3 texts + const [fullTexts, setFullTexts] = useState(null); // initially show only first 3 texts + const [fullTextsVisible, setFullTextsVisible] = useState(null); // initially show only first 3 texts + useEffect(() => { + if (otherCafes != null) { + let updatedFullTexts; + + if (otherCafes.length === 0) { + updatedFullTexts = [["buat kedai", 0]]; + } else if (otherCafes.length === 1) { + updatedFullTexts = [ + [otherCafes[0].name, otherCafes[0].cafeId], + ["buat kedai", -1] + ]; + } else { + updatedFullTexts = [ + ["semua", 0], // First entry is "semua" + ...otherCafes.map(cafe => [cafe.name, cafe.cafeId]), // Map over cafes to get name and cafeId pairs + ["+", -1] // Add the "+" entry + ]; + } + + setFullTexts(updatedFullTexts); // Set fullTexts with the original structure + // Set fullTextsVisible to an array of names only + setFullTextsVisible(updatedFullTexts.map(item => item[0])); // Extract just the names (first part of each pair) + + // Set the first 3 items in texts + setTexts(updatedFullTexts.map(item => item[0]).slice(0, 3)); + + // Increment resetKey to trigger re-render + setResetKey(prevKey => prevKey + 1); + } + + console.log(otherCafes); + }, [otherCafes]); + + + console.log(fullTexts) + const [selectedSwitch, setSelectedSwitch] = useState(0); + + const onItemToggle = (index) => { + let selectedCafeId = null; + + // When user clicks the last visible option (index === 2 in the current view) + if (index === 2) { + console.log(fullTexts); + if (fullTexts.indexOf(texts[2]) < fullTexts.length - 1) { + setTexts((prevTexts) => { + const newTexts = [...prevTexts]; + const nextText = fullTexts[prevTexts.length]; // Get the next item in the full list + newTexts.shift(); // Remove the first element + newTexts.push(nextText); // Add the next item to the end + setSelectedSwitch(1); // Change the selected index + return newTexts; + }); + } + } + + // When user clicks the first visible option (index === 0 in the current view) + if (index === 0) { + // Check if there is a previous text in the full list (before the first visible text) + if (fullTexts.findIndex(item => item[0] === texts[0]) > 0) { + setTexts((prevTexts) => { + const newTexts = [...prevTexts]; + const prevText = fullTexts[fullTexts.findIndex(item => item[0] === newTexts[0]) - 1]; // Get the previous item + newTexts.pop(); // Remove the last element + newTexts.unshift(prevText); // Add the previous item to the start + setSelectedSwitch(1); // Change the selected index + return newTexts; + }); + } + } + + // Dynamically update selectedSwitch state to trigger re-render + setSelectedSwitch(index); + + // Get the cafeId from the selected text based on the index + const selectedText = texts[index]; // Get the selected name from the texts array + const selectedItem = fullTexts.find(item => item[0] === selectedText); // Find the corresponding full item + if (selectedItem) { + selectedCafeId = selectedItem[1]; // Get the cafeId (second part of the pair) + } + + console.log('Selected cafeId:', selectedCafeId); // Log the selected cafeId + + setResetKey((prevKey) => prevKey + 1); // Increase the key to force re-render + }; + + // useEffect(() => { + // // This effect will run whenever the selectedSwitch changes + // // We could add logic here if needed for side effects + // }, [selectedSwitch]); return (
-

Laporan

+
+

Laporan

+
+ {otherCafes && } +
+
{filter == 'yesterday' || filter == 'weekly' ? - - : - - } + + : + + }
Kembali