[{"data":1,"prerenderedAt":143},["ShallowReactive",2],{"project-\u002Fprojects\u002F2026\u002Fagrestapp":3,"project-posts-\u002Fprojects\u002F2026\u002Fagrestapp":142},{"id":4,"title":5,"agency":6,"body":7,"compare":65,"cover":66,"date":72,"description":73,"draft":74,"extension":75,"facts":76,"featured":74,"gallery":90,"galleryLead":112,"highlights":113,"image":126,"links":127,"meta":129,"navigation":97,"note":130,"ogImage":131,"path":132,"seo":133,"stack":134,"stem":138,"tags":139,"__hash__":141},"projects_en\u002Fprojects\u002F2026\u002Fagrestapp\u002Findex.md","AgrestApp","Pesi",{"type":8,"value":9,"toc":60},"minimark",[10,14,19],[11,12,13],"p",{},"AgrestApp is a purchasing system for food businesses: orders and tenders for raw materials, price monitoring, supplier offers and savings analytics. I've been working on it in the Pesi team since October 2025. Several people build the front-end in Vue 3 and Inertia, so below I only describe the parts where the front-end is mine.",[15,16,18],"h2",{"id":17},"what-i-did","What I did",[20,21,22,30,36,42,48,54],"ul",{},[23,24,25,29],"li",{},[26,27,28],"strong",{},"UI component set"," – buttons, an accordion, tooltips, number fields and 69 icons as Vue components; moving the app's buttons to one component and a shared theme toggle",[23,31,32,35],{},[26,33,34],{},"Company website"," – the \"About the system\" page, a set of sections used to build the pages for bakeries, confectioneries, ice cream shops and HoReCa, price tiles and a pricing page with a payment toggle",[23,37,38,41],{},[26,39,40],{},"Analytics"," – the main chart, the date range picker with a compare mode, top suppliers, the savings summary and product profitability",[23,43,44,47],{},[26,45,46],{},"Supplier offer management"," – extending an existing screen: the individual price dialog, adding items, keyboard work and range selection",[23,49,50,53],{},[26,51,52],{},"Shop"," (now closed) – a basket with each supplier's minimum order, buying without an account, order history and complaints",[23,55,56,59],{},[26,57,58],{},"Migration to Tailwind CSS v4"," for the whole project",{"title":61,"searchDepth":62,"depth":62,"links":63},"",2,[64],{"id":17,"depth":62,"text":18},null,{"desktop":67,"phone":68,"width":69,"height":70,"alt":71},"\u002Fprojects\u002F2026\u002Fagrestapp\u002Fhome-top.webp","\u002Fprojects\u002F2026\u002Fagrestapp\u002Fhome-phone-top.webp",1440,900,"AgrestApp – the first screen of the home page","2026-10-01","A purchasing system for bakeries, confectioneries, ice cream shops and HoReCa. In the Pesi team I work on the front-end: UI components, the company website, analytics and supplier offer management.",false,"md",[77,81,84,87],{"value":78,"suffix":79,"text":80},"12"," mo.","in the project – since October 2025",{"value":82,"text":83},"69","icons as Vue components in the new UI set",{"value":85,"text":86},"4","industry pages – bakeries, confectioneries, ice cream shops and HoReCa – built from the same sections",{"value":88,"text":89},"296","classes in templates left unchanged when moving to Tailwind v4",[91,95,100,104,108],{"src":92,"width":69,"height":70,"alt":93,"caption":94},"\u002Fprojects\u002F2026\u002Fagrestapp\u002Fanalytics-top.webp","Analytics in compare mode","Analytics – a date range with a slider and fields, two periods compared, savings and a chart (made-up data)",{"src":96,"full":97,"alt":98,"caption":99},"\u002Fprojects\u002F2026\u002Fagrestapp\u002Fhome-full.webp",true,"AgrestApp home page","Home page – from the first screen to the newsletter",{"src":101,"full":97,"alt":102,"caption":103},"\u002Fprojects\u002F2026\u002Fagrestapp\u002Fabout-system-full.webp","The \"About the system\" page","\"About the system\" – sections describing the modules",{"src":105,"full":97,"alt":106,"caption":107},"\u002Fprojects\u002F2026\u002Fagrestapp\u002Findustry-ice-cream-full.webp","The page for ice cream shops","The industry page for ice cream shops – built from the same sections as the others",{"src":109,"full":97,"alt":110,"caption":111},"\u002Fprojects\u002F2026\u002Fagrestapp\u002Findustry-confectionery-full.webp","The page for confectioneries","The industry page for confectioneries","The company website and the app panel – analytics with made-up data. Click a screenshot to enlarge it.",[114,117,120,123],{"title":115,"text":116},"One date range in three places","In analytics, the slider, the date fields and the page address show the same range. A change in one place updates the others right away, and the data reloads only a moment after the last change. The calendar won't let you set the start after the end, and the default range starts on the day the company registered.",{"title":118,"text":119},"A price table like a spreadsheet","In supplier offer management, Enter and the arrow keys move to the field in the next row, and its value is already selected, ready to overwrite. Shift-click selects a whole range of rows, like in an email inbox.",{"title":121,"text":122},"An individual price without mistakes","The individual price dialog checks the minimum net price, doesn't accept zero or an empty value, and suggests a default value for a single item. The price turns green when it's lower than or equal to the lowest price.",{"title":124,"text":125},"Tailwind v4 without rewriting templates","Instead of changing hundreds of classes, I brought back three v3 values in the config. Then I compared the output CSS with the previous version, went through the pages and fixed regressions the build didn't report – for example dialogs that hid under their own backdrop after the migration.","\u002Fprojects\u002F2026\u002Fagrestapp\u002Fthumbnail.webp",{"live":128},"https:\u002F\u002Fagrestapp.pl",{},"I work in a team – I only describe the parts where the front-end is mine. The app panel is not public.","\u002Fog\u002Fprojects\u002Fagrestapp-en.jpg","\u002Fprojects\u002F2026\u002Fagrestapp",{"title":5,"description":73},[135,136,137],"Vue 3","Inertia","Tailwind CSS v4","projects\u002F2026\u002Fagrestapp\u002Findex",[140],"vue","MOpfsAwv3b72T_fIXB_L4fQ_W41B0q3PHCoSCnKjybQ",[],1792087405142]